/*
Theme Name: Hatten av
Theme URI: https://hattenav.se
Author: Hatten av Kommunikation
Description: Hatten av Kommunikations blocktema för WordPress som CMS. Utseendet från Webflow-sidan Old Home. Innehållsstrukturen (case, tjänster, blogg) ligger i tillägget "Hatten av – innehåll".
Requires at least: 6.5
Requires PHP: 7.4
Version: 2.43.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hattenav
*/

/*
Mått avlästa ur källans CSS (rendring-runs/2026-09-22-hattenav-run1/
pure-html/styles.css) via tema-run1. Header, sidfotsrad och listor finns
inte i källan och är nya.
*/

/* === Bas === */
body {
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  --ha-lh: 27px;
}
h1, h2, h3, h4, h5, h6, .wp-block-heading { color: var(--wp--preset--color--foreground); }
p { font-size: 16px; line-height: 1.5; }

/* Header/main/footer kant i kant, luften sätts per sektion. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Källans brytpunkter: body 18/17/16px, h1 53/48/42/39px,
   ingress 52/49/46/38px, sidomarginal 240px → 10px under 992px. */
@media (max-width: 991px) {
  body {
    font-size: 17px;
    --ha-lh: 25.5px;
    --wp--style--root--padding-left: 10px;
    --wp--style--root--padding-right: 10px;
    --wp--preset--font-size--x-large: 48px;
    --wp--preset--font-size--ingress: 49px;
  }
}
@media (max-width: 767px) {
  body {
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-size--ingress: 46px;
    --ha-h1-line-height: 58px;
  }
}
@media (max-width: 479px) {
  body {
    font-size: 16px;
    --ha-lh: 24px;
    /* min(): "verkligheten." ryms i 360 px utan avstavning (2026-10-21) */
    --wp--preset--font-size--x-large: min(39px, 9.9vw);
    --wp--preset--font-size--ingress: 38px;
    --ha-h1-line-height: 51px;
  }
}

/* === Rubriker: 20px över, 10px under som i källan === */
h1.wp-block-heading, h2.wp-block-heading,
.wp-block-post-title, .wp-block-query-title { margin-top: 20px; margin-bottom: 10px; }
h1, .has-x-large-font-size { line-height: var(--ha-h1-line-height, 67.2px); }

/* === Ingress (.has-ingress-font-size) === */
.has-ingress-font-size {
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
/* Länk i ingressen: texten behåller ingressens färg, understrykningen
   får webbläsarens standardlänkblå som i källan (uppmätt i tema-run1). */
.has-ingress-font-size a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #0000ee;
}

/* === Rubrik + ingress (.ha-ingress-stack) ===
   h1 (marg-botten 10) + 24px gap; stycken åtskilda av en radhöjd. */
.ha-ingress-stack > .wp-block-heading { margin-bottom: 0; }
.ha-ingress-stack > .wp-block-heading:first-child { margin-top: 20px; }
.ha-ingress-stack > .wp-block-heading + p { margin-top: 34px; }
.ha-ingress-stack > p { margin-bottom: 0; }
.ha-ingress-stack > p + p { margin-top: 1.25em; }

/* === Hero (.ha-hero): källans 64 + 32 = 96px ovanför === */
.wp-block-group.ha-hero {
  text-align: left;
  padding-top: 96px;
  padding-bottom: 0;
}

/* ==========================================================================
   Old Home (Webflow, pageId 665edb710ecfcff96432ef77). Mått och regler ur
   källans CSS (oldhome-kalla/oldhome-regler.css) och live-avläsning
   (oldhome-kalla/referens-1254.txt). Selektorerna börjar med ":root body" för att slå WordPress layoutregler
   (:root :where(.is-layout-flow) > :first-child m.fl.). Webflow ärver radhöjden 27px från
   body (150 % av 18px), därför står 27px utskrivet på flera ställen.
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Sidhuvud (.navbar-logo-left) === */
/* Ingen linje under sidhuvudet, en mjuk skugga i stället (Mika 2026-10-20).
   Sidhuvudet ligger över innehållet (z-index) så att skuggan syns även när
   det inte är fast (mobilen). */
.ha-site-header {
  background: var(--wp--preset--color--background);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
  padding: 0 24px;
}
header.wp-block-template-part:has(> .ha-site-header) { position: relative; z-index: 50; }
.ha-site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 75px;
  align-items: center;
}
.ha-site-header .ha-logo { margin: 0; flex: 0 0 auto; }
.ha-site-header .ha-meny { color: var(--wp--preset--color--primary); }
.ha-site-header .ha-logo a { display: block; }
.ha-site-header .ha-logo img { display: block; width: 240px; height: 41px; }

.ha-meny .wp-block-navigation__container { gap: 32px; align-items: center; }
.ha-meny .wp-block-navigation-item__content {
  padding: 24px 12px;
  color: var(--wp--preset--color--primary);
  font-size: 14px;
  line-height: var(--ha-lh);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.ha-meny .wp-block-navigation-item__content:hover,
.ha-meny .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--secondary); }
.ha-meny .ha-meny-knapp > .wp-block-navigation-item__content,
.ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:visited {
  padding: 8px 20px;
  background: var(--wp--preset--color--primary);
  border-radius: 37px;
  color: var(--wp--preset--color--background);
}
.ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:hover,
.ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:focus-visible {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--background);
}

/* Sticky sidhuvud på desktop (Mika 2026-10-13): från 992px ligger sidhuvudet
   kvar överst när man scrollar. Det är template-partens <header> som klistras
   fast (den inre gruppen är lika hög som sin förälder och skulle inte röra
   sig). Under adminfältet när man är inloggad. Ankarlänkar landar under
   sidhuvudet. Under 992px (hamburgarmenyn) är det som förut. */
@media (min-width: 992px) {
  header.wp-block-template-part:has(> .ha-site-header) {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 50;
  }
  html { scroll-padding-top: calc(76px + var(--wp-admin--admin-bar--height, 0px)); }
}

/* Old Home fäller ihop menyn under 992px (WordPress gör det först under 600). */
@media (max-width: 991px) {
  .ha-site-header { padding: 0 0 0 10px; }
  .ha-site-header__inner { min-height: 60px; }
  .ha-meny .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .ha-meny .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .ha-meny .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--foreground);
    padding: 14px;
  }
  .ha-meny .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }
}
/* Kundcase-sidhuvud (profilen Kundcase, se Profiler i functions.php): gul
   yta, röd meny och röd knapp med vit text, som sidfotsbandet i
   Kundcase-offerten. */
html.ha-profil-kundcase .ha-site-header {
  --wp--preset--color--primary: #94402e;
  --wp--preset--color--secondary: #000;
  --wp--preset--color--background: #f4bd5c;
  --wp--preset--color--foreground: #000;
}
html.ha-profil-kundcase .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content,
html.ha-profil-kundcase .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:visited,
html.ha-profil-kundcase .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:hover,
html.ha-profil-kundcase .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:focus-visible { color: #fff; }

/* Nyhetsbrev-sidhuvud (profilen Nyhetsbrev): mörkt med
   offwhite meny, offwhite knapp med mörk text. */
html.ha-profil-nyhetsbrev .ha-site-header {
  --wp--preset--color--primary: #eeebe5;
  --wp--preset--color--secondary: #eeebe5;
  --wp--preset--color--background: #161616;
  --wp--preset--color--foreground: #eeebe5;
}
html.ha-profil-nyhetsbrev .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content,
html.ha-profil-nyhetsbrev .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:visited,
html.ha-profil-nyhetsbrev .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:hover,
html.ha-profil-nyhetsbrev .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:focus-visible { color: #161616; }

/* Öppen mobilmeny: offwhite yta, orange menyval i mitten (Old Home). */
.ha-site-header .ha-meny:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: center;
}
.ha-meny .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--foreground); }
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 8px; }
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 24px;
  line-height: 36px;
  padding: 12px 20px;
}

/* === Sektioner i sidinnehållet ligger kant i kant === */
:root body .ha-front, body .ha-front > * { margin: 0; }
:root body .ha-front .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

/* === Ordrader (.section-100vw) === */
:root body .ha-ordrader { padding-top: 60px; overflow: hidden; }
:root body .ha-ordrader__yta { width: 100%; overflow: hidden; }
:root body .ha-ordrader__rad {
  display: flex;
  will-change: transform;
}
/* Läget vid skroll 0 (även utan JS / vid reducerad rörelse). */
:root body .ha-ordrader__rad:nth-child(odd) { transform: translate3d(-57.374vw, 0, 0); }
:root body .ha-ordrader__rad:nth-child(even) { transform: translate3d(-29.586vw, 0, 0); }
:root body .ha-ordrader__ord {
  flex: 0 0 auto;
  margin: 20px 16px 10px 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--ha-h1-line-height, 67.2px);
  white-space: nowrap;
}
:root body .ha-ordrader__ord.is-bla { color: var(--wp--preset--color--secondary); }
:root body .ha-ordrader__ord.is-orange { color: var(--wp--preset--color--primary); }

/* I redigeraren är ordraderna en vanlig lista: visa orden stora och i
   rätt färger så att det syns vad listan är. (Gäller bara ul, sajten
   visar en section.) */
:root body ul.ha-ordrader {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0;
  padding: 60px 24px 10px;
  list-style: none;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--ha-h1-line-height, 67.2px);
}
:root body ul.ha-ordrader > li { margin: 0; color: var(--wp--preset--color--secondary); }
:root body ul.ha-ordrader > li:nth-child(even) { color: var(--wp--preset--color--primary); }

/* === Ingress med knapp (.hero-no-image) === */
:root body .ha-ingress-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 240px;
}
:root body .ha-ingress-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 960px;
  padding: 32px 0;
}
:root body .ha-ingress-hero__inner > * { margin: 0; }
:root body .ha-ingress {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--ingress);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.03em;
}
/* Betonade ord byter bara färg, inga versaler (Mika 2026-10-13). */
:root body .ha-ingress em {
  color: var(--wp--preset--color--secondary);
  font-style: normal;
}
@media (max-width: 991px) {
  :root body .ha-ingress-hero { padding-left: 10px; padding-right: 10px; }
}

/* Knapp med pil: "ge mig mer   →" (pilen 17px, 24px luft). */
:root body .ha-knapp-pil .wp-block-button__link { line-height: 25.5px; display: inline-flex; align-items: center; gap: 24px; }
:root body .ha-knapp-pil .wp-block-button__link::after { content: "→"; font-size: 17px; }

/* === Tre kort (.gallery-overview) === */
:root body .ha-kortsektion {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 64px !important;
  padding: 64px 24px;
}
:root body .ha-kortsektion__rutnat {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 940px;
  margin: 32px 0 92px;
}
:root body .ha-kortsektion__rutnat > * { margin: 0; }
:root body .ha-kort {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 25px 25px;
  border-radius: 20px;
  outline: 1px solid var(--wp--preset--color--primary);
  outline-offset: 0;
  transition: transform .375s, background-color .15s cubic-bezier(.55, .085, .68, .53);
}
:root body .ha-kort:hover { background: #fff; transform: scale(1.06); }
:root body .ha-kort > * { margin: 0; width: 100%; }
:root body .ha-kort > .wp-block-heading { margin: 20px 0 10px; color: var(--wp--preset--color--primary); }
:root body .ha-kort__text {
  margin-top: 32px !important;
  color: var(--wp--preset--color--primary);
  font-size: 16px;
  line-height: 24px;
}
:root body .ha-kort__knapp { margin-top: 32px !important; }
:root body .ha-kort__knapp .wp-block-button,
:root body .ha-kort__knapp .wp-block-button__link { width: 100%; text-align: center; }
@media (max-width: 991px) {
  :root body .ha-kortsektion__rutnat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  :root body .ha-kort__knapp .wp-block-button__link { font-size: 14px; letter-spacing: .06em; }
}
@media (max-width: 479px) {
  :root body .ha-kortsektion__rutnat { grid-template-columns: 1fr; }
  :root body .ha-kort { min-height: 326px; }
}

/* === Citat (.testimonial-column-light) === */
:root body .ha-citat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 64px 24px;
  background: var(--wp--preset--color--secondary);
}
:root body .ha-citat > * { margin: 0; }
:root body .ha-citat > .ha-citat__rubrik {
  margin: 20px 0 10px;
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--ha-h1-line-height, 67.2px);
  letter-spacing: normal;
  text-transform: none;
}
:root body .ha-citat__ruta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 315.333px;
  padding: 24px;
  background: var(--wp--preset--color--background);
  border: 1px solid #e4ebf3;
  border-radius: 11px;
}
:root body .ha-citat__ruta > * { margin: 0; }
:root body .ha-citat__ruta > h3 { margin: 20px 0 10px; }
:root body .ha-citat__text {
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 23px;
  font-weight: 400;
  line-height: 34.5px;
}
:root body .ha-citat__person {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 52px !important;
  padding: 24px 16px;
}
:root body .ha-citat__person > * { margin: 0; }
:root body .ha-citat__namn { color: var(--wp--preset--color--secondary); font-size: 20px; font-weight: 500; line-height: 30px; }
:root body .ha-citat__titel { color: var(--wp--preset--color--secondary); font-size: 14px; line-height: 21px; }

/* === Loggvägg (.samarbeten-loggor) === */
:root body .ha-loggvagg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 100px 24px;
  background: #fff;
}
:root body .ha-loggvagg > * { margin: 0; }
:root body .ha-loggvagg > .ha-loggvagg__rubrik { margin: 20px 0 10px; color: var(--wp--preset--color--secondary); text-transform: none; } /* "Våra samarbeten", inte versaler (Mika 2026-10-20) */
:root body .ha-loggvagg__rader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
:root body .ha-loggvagg__rader > * { margin: 0; }
:root body .ha-loggvagg__rad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 48px;
  width: 100%;
}
:root body .ha-loggvagg__rad > * { margin: 0; }
:root body .ha-logga {
  margin: 0;
  height: 79px;
  filter: grayscale(1);
  transition: filter .825s;
}
:root body .ha-logga:hover { filter: grayscale(0); }
:root body .ha-logga img { display: block; height: 79px; object-fit: contain; }
@media (max-width: 991px) {
  :root body .ha-loggvagg__rad { flex-direction: column; row-gap: 0; }
}

/* === Sidfot (.footer) === */
:root body .ha-site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 64px 24px 8px;
  background: var(--wp--preset--color--secondary);
}
:root body .ha-site-footer > * { margin: 0; }
:root body .ha-site-footer p { margin: 0; }
:root body .ha-sidfot__kolumner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 960px;
}
:root body .ha-sidfot__kolumner > * { margin: 0; }
:root body .ha-sidfot__om {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 320px;
}
:root body .ha-sidfot__om > * { margin: 0; }
:root body .ha-sidfot__logga { padding-top: 16px; }
:root body .ha-sidfot__logga a { display: block; }
:root body .ha-sidfot__logga img { display: block; width: 242px; height: 40px; }
:root body .ha-sidfot__text { color: var(--wp--preset--color--background); font-size: inherit; line-height: 1.5; }
:root body .ha-sidfot__smala {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 600px;
  padding-top: 16px;
}
:root body .ha-sidfot__smala > * { margin: 0; }
:root body .ha-sidfot__kolumn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
:root body .ha-sidfot__kolumn > * { margin: 0; }
:root body .ha-sidfot__rubrik {
  margin-bottom: 8px !important;
  color: var(--wp--preset--color--background);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
:root body .ha-sidfot__lank { font-size: inherit; line-height: 1.5; }
:root body .ha-sidfot__lank--liten { font-size: 16px; line-height: 24px; }
:root body .ha-sidfot__lank a { color: var(--wp--preset--color--background); text-decoration: none; }
:root body .ha-sidfot__lank a:hover,
:root body .ha-sidfot__lank a:focus-visible { text-decoration: underline; }
:root body .ha-sidfot__copyright {
  width: 100%;
  max-width: 940px;
  padding: 16px 0;
  color: var(--wp--preset--color--background);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
/* Tydligare kolumner (Mika 2026-10-20): tunna linjer mellan kolumnerna och ovanför
   copyright-raden, allt vänsterställt. Linjerna i sidfotens textfärg, så de följer profilen. */
:root body .ha-site-footer { --ha-sidfot-linje: color-mix(in srgb, var(--wp--preset--color--background) 28%, transparent); padding-bottom: 24px; }
:root body .ha-sidfot__kolumner { gap: 48px; }
:root body .ha-sidfot__om { max-width: 280px; }
:root body .ha-sidfot__smala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; flex: 1; max-width: none; }
:root body .ha-sidfot__kolumn { padding: 0 8px 0 20px; border-left: 1px solid var(--ha-sidfot-linje); }
:root body .ha-sidfot__rubrik { margin-bottom: 12px !important; }
:root body .ha-sidfot__copyright { max-width: 960px; padding: 20px 0 0; border-top: 1px solid var(--ha-sidfot-linje); font-size: 14px; text-align: left; }
@media (max-width: 991px) {
  :root body .ha-sidfot__kolumner { flex-direction: column; align-items: stretch; gap: 36px; max-width: 600px; }
  :root body .ha-sidfot__om { max-width: none; }
  :root body .ha-sidfot__copyright { max-width: 600px; }
}
@media (max-width: 599px) {
  /* Tjänster och Företaget sida vid sida, Kontakt under, linjer mellan grupperna. */
  :root body .ha-sidfot__smala { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 28px; border-top: 1px solid var(--ha-sidfot-linje); }
  :root body .ha-sidfot__kolumn { padding: 0 0 0 16px; }
  :root body .ha-sidfot__kolumn:first-child { padding-left: 0; border-left: 0; }
  :root body .ha-sidfot__kolumn:nth-child(3) { grid-column: 1 / -1; margin-top: 28px !important; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--ha-sidfot-linje); }
  :root body .ha-sidfot__lank { font-size: 16px; overflow-wrap: anywhere; }
}

/* === Ikonlänk (.ha-icon-link): hela ytan klickbar, hover orange === */
.wp-block-group.ha-icon-link {
  position: relative;
  gap: 0;
  text-align: center;
}
.ha-icon-link .wp-block-image { margin: 0; }
.ha-icon-link .wp-block-image img { display: block; width: 60px; height: auto; }
.ha-icon-link p {
  margin: 0;
  font-size: 18px;
  line-height: 27px;
}
@media (max-width: 991px) {
  .ha-icon-link p { font-size: 17px; line-height: 25.5px; }
}
@media (max-width: 479px) {
  .ha-icon-link p { font-size: 16px; line-height: 24px; }
}
.ha-icon-link a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
  transition: color .25s;
}
.ha-icon-link a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ha-icon-link:hover a,
.ha-icon-link a:focus-visible { color: var(--wp--preset--color--primary); }

/* === Vanliga sidor, inlägg, listor (.ha-page) === */
.ha-page { padding-top: 96px; padding-bottom: 0; }
.ha-page > .wp-block-post-title,
.ha-page > .wp-block-query-title { margin-bottom: 34px; }

.ha-list { display: grid; gap: 40px; }
.ha-list .wp-block-post-title { margin: 0; font-size: 24px; line-height: 1.3; }
.ha-list .wp-block-post-title a { color: var(--wp--preset--color--foreground); text-decoration: none; }
.ha-list .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.ha-list .wp-block-post-date { font-size: 14px; }
.ha-list .wp-block-post-excerpt p { margin: 8px 0 0; }

/* === Case: lista (/case/) och enskilt case ===
   Heron följer Webflow-sidan Kundcase (oldhome-kalla/kundcase-1263.txt):
   padding 64px 240px, innerruta 783 bred med 32px luft, rubrik + Saol-ingress.
   Korten är Old Home-korten (.ha-kort) med omslagsbild. */
:root body .ha-caselista, :root body .ha-case, :root body .ha-caselista > *, :root body .ha-case > * { margin: 0; }
:root body .ha-case-hero { padding: 64px 240px; }
:root body .ha-case-hero__inner { max-width: 783px; padding: 32px 0; }
:root body .ha-case-hero__inner > * { margin: 0; }
/* Långa sammansatta ord får inte skjuta ut sidan i mobil. */
:root body .ha-case-hero__inner { hyphens: manual; overflow-wrap: break-word; }
:root body .ha-casekort > .wp-block-post-title, :root body .ha-case-galleri > .wp-block-heading { hyphens: manual; overflow-wrap: break-word; }
:root body .ha-case-hero__inner > .wp-block-heading,
:root body .ha-case-hero__inner > .wp-block-post-title { margin: 20px 0 10px; }
:root body .ha-case-ingress p,
:root body .ha-case-hero .ha-ingress { margin: 34px 0 0; }
:root body .ha-case-ingress p {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--ingress);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.03em;
}
:root body .ha-case-tillbaka { font-size: 15px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
:root body .ha-case-tillbaka a { color: var(--wp--preset--color--primary); text-decoration: none; }
:root body .ha-case-tillbaka a:hover { text-decoration: underline; }

:root body .ha-case-bild { max-width: 960px; margin: 0 auto !important; padding: 0 24px; box-sizing: content-box; }
:root body .ha-case-bild img { border-radius: 20px; }
:root body .ha-case-text { padding: 64px 24px 0; }
:root body .ha-case-text > * { max-width: 783px; }
:root body .ha-case-text > .wp-block-heading { color: var(--wp--preset--color--primary); font-size: 24px; line-height: 36px; margin: 40px auto 10px; }

:root body .ha-case-galleri {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 64px 24px;
}
:root body .ha-case-galleri > * { margin: 0; }
:root body .ha-case-galleri > .wp-block-heading { margin: 20px 0 10px; text-transform: none; letter-spacing: normal; }
:root body .ha-fler-case { padding-top: 96px; gap: 56px; }
:root body .ha-case-query { width: 100%; max-width: 940px; }
:root body .ha-casekort-rutnat {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:root body .ha-casekort-rutnat > li { margin: 0; display: flex; }
:root body .ha-casekort { width: 100%; padding-top: 25px; }
:root body .ha-casekort > .wp-block-post-title { margin: 20px 0 10px; font-size: 24px; line-height: 36px; }
:root body .ha-casekort > .wp-block-post-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
:root body .ha-casekort__bild { margin: 0 !important; }
:root body .ha-casekort__bild img { border-radius: 12px; }
:root body .ha-casekort .ha-kort__text { margin-top: 12px !important; flex: 1; }
:root body .ha-casekort .ha-kort__text p { margin: 0; }
:root body .ha-casekort__knapp {
  box-sizing: border-box;
  display: block;
  margin-top: 32px !important;
  padding: 12px 20px;
  border-radius: 38px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--ha-lh);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
:root body .ha-case-sidor { justify-content: center; gap: 24px; margin-top: 48px; }
:root body .ha-case-sidor a { color: var(--wp--preset--color--primary); }
@media (max-width: 991px) {
  :root body .ha-case-hero { padding-left: 10px; padding-right: 10px; }
  :root body .ha-casekort-rutnat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  :root body .ha-casekort__knapp { font-size: 14px; letter-spacing: .06em; }
}
@media (max-width: 479px) {
  :root body .ha-casekort-rutnat { grid-template-columns: 1fr; }
  :root body .ha-case-bild { padding: 0 10px; }
}

/* ==========================================================================
   Tjänster. /tjanster/ följer Webflow-sidan "Våra tjänster"
   (oldhome-kalla/tjanster-1263.txt): samma hero som Kundcase (64px 240px,
   innerruta 783 med 32px luft, 40px mellan delarna), introt i en kolumn med
   24px mellanrum, sedan tjänsterna: rubrik + två kolumner (bild 294, text
   224, 30px emellan, högst 70 % bredd), varannan blå och spegelvänd.
   ========================================================================== */
:root body .ha-tjanster, :root body .ha-tjanster > *, :root body .ha-tjanst, :root body .ha-tjanst > * { margin: 0; }

/* Rubriker i mobil avstavas aldrig av webbläsaren (Safari gav "frå-gor",
   "inter-vjuer", Mika 2026-10-21). Raderna jämnas ut i stället, och ord som
   inte ryms har mindre grad (x-large under 479px), så att nödbrytningen
   bara är en säkerhet. Vill man ändå bryta ett ord: mjukt bindestreck (&shy;) i texten. */
@media (max-width: 767px) {
  :root body .ha-sektion .wp-block-heading { hyphens: manual; overflow-wrap: break-word; text-wrap: pretty; }
}

/* Citat med stort citattecken (.citatblock + .quote-mark-big) */
:root body .ha-citatblock {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
:root body .ha-citatblock::before {
  content: "\"";
  flex: 0 0 auto;
  margin: 55px 9px 0 0;
  color: var(--wp--preset--color--foreground);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 102px;
  line-height: 27px;
}
:root body .ha-citatblock p {
  margin: 0 0 10px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 23px;
  font-weight: 400;
  line-height: 34.5px;
}
:root body .ha-brodtext { color: var(--wp--preset--color--primary); }
:root body .ha-brodtext > * { margin: 0; }
:root body .ha-brodtext > p { font-size: inherit; line-height: var(--ha-lh); }
:root body .ha-brodtext > p + p { margin-top: var(--ha-lh); }
:root body .ha-brodtext strong { font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }

/* Tjänstelistan (sidorna under Tjänster) */
:root body .ha-tjanstlista__lista {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:root body .ha-tjanstlista__lista > li {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  color: var(--wp--preset--color--primary);
}
:root body .ha-tjanstlista__lista > li:nth-child(even) { color: var(--wp--preset--color--secondary); }
:root body .ha-tjanstlista__lista > li > * { margin: 0; }
:root body .ha-tjanstlista__lista > li > .ha-tjanst-rubrik {
  margin: 20px 0 10px;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  hyphens: manual;
  overflow-wrap: break-word;
}
:root body .ha-tjanst-rubrik a { color: inherit; text-decoration: none; }
:root body .ha-tjanst-rubrik a:hover, :root body .ha-tjanst-rubrik a:focus-visible { text-decoration: underline; }
:root body .ha-tjanst-kolumner {
  display: flex;
  gap: 30px;
  max-width: 70%;
}
:root body .ha-tjanstlista__lista > li:nth-child(even) .ha-tjanst-kolumner { flex-direction: row-reverse; }
:root body .ha-tjanst-kolumner > * { margin: 0; }
/* Webflow sträcker bilden till textens höjd (object-fit fill); här beskärs
   den i stället, så att den inte blir förvrängd. */
:root body .ha-tjanst-bild { flex: 0 0 294px; width: 294px; }
:root body .ha-tjanst-bild a { display: block; height: 100%; }
:root body .ha-tjanst-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root body .ha-tjanst-textkolumn { flex: 1 1 auto; min-width: 0; }
:root body .ha-tjanst-textkolumn > * { margin: 0; }
:root body .ha-tjanst-text { margin: 0 0 10px; font-size: 16px; line-height: 24px; }
:root body .ha-tjanst-text strong { font-weight: 700; }
:root body .ha-tjanst-las {
  display: inline-block;
  margin-top: 8px;
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}
:root body .ha-tjanst-las::after { content: " →"; }
:root body .ha-tjanst-las:hover, :root body .ha-tjanst-las:focus-visible { text-decoration: underline; }
@media (max-width: 991px) {
  :root body .ha-tjanst-kolumner { max-width: 100%; }
}
@media (max-width: 479px) {
  :root body .ha-citatblock { align-items: flex-start; }
  :root body .ha-tjanst-kolumner,
  :root body .ha-tjanstlista__lista > li:nth-child(even) .ha-tjanst-kolumner { flex-direction: column; gap: 16px; }
  :root body .ha-tjanst-bild { flex: none; width: 100%; }
  :root body .ha-tjanst-bild img { height: auto; aspect-ratio: 3 / 2; }
}

/* Case: vilken tjänst caset hör till, under rubriken. */
:root body .ha-case-tjanst { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--secondary); }
:root body .ha-case-tjanst a { color: var(--wp--preset--color--secondary); text-decoration: none; }
:root body .ha-case-tjanst a:hover { text-decoration: underline; }

/* ==========================================================================
   Tjänstesida (/tjanster/<tjänst>/): sektioner som mönster ("Tjänst: …"),
   från stil-test/2026-09-26-kundcase-onepager. Varje sektion ligger kant i
   kant med en innerruta på högst 960px.
   ========================================================================== */
:root body .ha-tjanst-innehall > * { margin-block-start: 0; margin-block-end: 0; }
:root body .ha-sektion {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 24px;
}
:root body .ha-sektion__inner { width: 100%; max-width: 960px; }
:root body .ha-sektion__inner > * { margin: 0; }
:root body .ha-sektion--fortsatt { padding-top: 0; }
/* Blå och orange ytor: färgerna går att byta per sida (se Kundcase-färger nedan). */
:root body .ha-sektion--bla { background: var(--ha-yta, var(--wp--preset--color--secondary)); color: var(--ha-yta-text, var(--wp--preset--color--background)); }
:root body .ha-sektion--vit { background: #fff; }
:root body .ha-sektion--orange { background: var(--wp--preset--color--primary); color: var(--ha-orange-text, var(--wp--preset--color--background)); }

:root body .ha-kicker {
  margin-bottom: 20px !important;
  color: var(--wp--preset--color--primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .19em;
  line-height: 1.5;
  text-transform: uppercase;
}
:root body .ha-sektion--bla .ha-kicker, :root body .ha-sektion--orange .ha-kicker { color: currentColor; opacity: .85; }
:root body .ha-sektion .ha-ingress { letter-spacing: -.03em; text-transform: none; }
:root body .ha-sektion--bla .ha-ingress em, :root body .ha-sektion--bla .ha-lead em, :root body .ha-sektion--bla .ha-notis em { color: var(--wp--preset--color--primary); }
:root body .ha-notis em, :root body .ha-lead em { font-style: normal; color: var(--wp--preset--color--secondary); }
:root body .ha-lead {
  max-width: 780px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.4;
}
:root body .ha-lead strong { color: var(--wp--preset--color--secondary); font-weight: 300; }
:root body .ha-sektion__inner > .ha-ingress + .ha-lead { margin-top: 28px; }
:root body .ha-sektion--bla .ha-lead, :root body .ha-sektion--orange .ha-lead { color: currentColor; }
:root body .ha-display {
  margin-bottom: 32px !important;
  color: var(--wp--preset--color--primary);
  letter-spacing: normal;
  line-height: 1.12;
  text-transform: none;
}
:root body .ha-sektion--bla .ha-display, :root body .ha-sektion--orange .ha-display { color: currentColor; }
:root body .ha-sektion--bla .wp-block-heading, :root body .ha-sektion--orange .wp-block-heading { color: inherit; }

/* Inledning */
:root body .ha-tjanst-hero { padding: 96px 24px 72px; }
:root body .ha-tjanst-hero .ha-sektion__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
:root body .ha-tjanst-hero .ha-ingress { margin: 0; }
:root body .ha-tjanst-hero .ha-sektion__inner > .ha-lead { margin-top: 0; }
:root body .ha-tjanst-hero p:not(.ha-lead) { margin: 0; color: var(--wp--preset--color--foreground); font-size: 18px; line-height: 1.6; max-width: 783px; }
:root body .ha-tjanst-hero p strong { font-weight: 500; }

/* Knappar: kontur (orange ram) och ljus på orange botten */
:root body .ha-sektion .wp-block-buttons { gap: 16px; }
:root body .ha-sektion .wp-block-button__link { border: 1px solid var(--wp--preset--color--primary); padding: 12px 32px; transition: background-color .15s, color .15s, border-color .15s; }
:root body .ha-sektion .wp-block-button__link:hover { background: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--background); }
:root body .ha-sektion .is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--primary); }
:root body .ha-sektion .is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); }
:root body .ha-sektion--orange .is-style-outline > .wp-block-button__link { background: var(--wp--preset--color--background); border-color: var(--wp--preset--color--background); color: var(--wp--preset--color--primary); }
:root body .ha-sektion--orange .is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); }
/* Orange får aldrig kombineras med blått (Mika 2026-10-15): i Hatten avs blå sektioner är knappar
   och betonade ord ljusa, bockarna tar sektionens textfärg. Kundcase/DN har egna ytfärger och berörs inte. */
:root body.ha-utseende-hattenav .ha-sektion--bla .wp-block-button__link { background: var(--wp--preset--color--background); border-color: var(--wp--preset--color--background); color: var(--wp--preset--color--secondary); }
:root body.ha-utseende-hattenav .ha-sektion--bla .wp-block-button__link:hover { background: transparent; border-color: var(--wp--preset--color--background); color: var(--wp--preset--color--background); }
:root body.ha-utseende-hattenav .ha-sektion--bla .ha-ingress em,
:root body.ha-utseende-hattenav .ha-sektion--bla .ha-lead em,
:root body.ha-utseende-hattenav .ha-sektion--bla .ha-notis em { color: inherit; }
:root body .ha-sektion--bla .ha-bockar > li { color: inherit; }
:root body .ha-sektion--bla .ha-bockar > li::before { color: inherit; }
:root body .ha-bockar + p { margin-top: 0; margin-bottom: 24px; }
:root body .ha-sektion--bla .ha-bockar + p { color: inherit; }

/* Rutnät (3 → 2 → 1 kolumner) */
:root body .ha-rutnat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
:root body .ha-rutnat > * { margin: 0; min-width: 0; }
/* Två kort (startsidans topp: Kundcase och Nyhetsbrev). */
:root body .ha-rutnat--2 { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 900px; }
:root body .ha-tjanst-hero .ha-rutnat { margin-top: 0; }
/* Jättenamnet överst på tjänstesidorna (Mika 2026-10-13): samma TAN
   Misfits-namn som tjänstens sektion på Tjänster, så att det följer med in.
   Toppen fyller skärmen; ingressen och knapparna står under namnet. */
:root body .ha-tjanst-hero:has(.ha-jattenamn) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
}
:root body .ha-tjanst-hero:has(.ha-jattenamn) > .ha-sektion__inner { width: 100%; }
/* Kundcase och Nyhetsbrev: toppen är så hög som innehållet, inte skärmhög
   (Mika 2026-10-15: för mycket tom yta före Personlighetstest). */
:root body.page-template-tjanstesida-kundcase .ha-tjanst-hero:has(.ha-jattenamn),
:root body.page-template-tjanstesida-nyhetsbrev .ha-tjanst-hero:has(.ha-jattenamn),
:root body.page-template-tjanstesida-webbsson .ha-tjanst-hero:has(.ha-jattenamn),
:root body.page-template-tjanstesida-brandspirit .ha-tjanst-hero:has(.ha-jattenamn) { min-height: 0; }
:root body .ha-tjanst-hero .ha-sektion__inner > p.ha-kicker { margin: 0 0 -24px !important; color: var(--wp--preset--color--primary); font-size: 15px; line-height: 1.5; }
:root body .ha-jattenamn {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(36px, calc((100vw - 48px) / 8.2), 140px); /* "Nyhetsbrev" ≈ 8 teckengrader, ryms i 375px */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
  overflow-wrap: break-word;
}
:root body .ha-tjanst-hero p.ha-hero-overgang {
  margin: 24px 0 0;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
}
:root body .ha-sektion--fortsatt .ha-rutnat { margin-top: 28px; }

/* Kort (orange ram, som Old Home-korten) */
:root body .ha-tjanstkort {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px 30px;
  border-radius: 20px;
  outline: 1px solid var(--wp--preset--color--primary);
  transition: transform .375s, background-color .15s cubic-bezier(.55, .085, .68, .53);
}
:root body .ha-tjanstkort:hover { background: #fff; transform: scale(1.03); }
/* I vita sektioner blir korten offwhite vid hovring i stället (Mika 2026-10-20). */
:root body .ha-sektion--vit .ha-tjanstkort:hover { background: var(--wp--preset--color--background); }
:root body .ha-tjanstkort > * { margin: 0; }
:root body .ha-tjanstkort > h3 {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
}
:root body .ha-tjanstkort > p { color: var(--wp--preset--color--primary); font-size: 16px; line-height: 1.55; }
:root body .ha-tjanstkort > p.ha-erbjudande__vem {
  margin-top: -8px;
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 21px;
  font-style: normal; /* okursiv sedan 2026-10-13 (Mika: "så får vi se hur det känns") */
  font-weight: 400;
}
:root body .ha-erbjudande ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
:root body .ha-erbjudande li { padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent); }
:root body .ha-erbjudande li::before { content: "→ "; color: var(--wp--preset--color--primary); }
:root body .ha-erbjudande__knapp { margin-top: auto; }
/* Case-puff i tjänstekorten (Mika 2026-10-22): liten bild + två rader, ingen länk, knappen är kortets enda klick.
   Står längst ner så att puffarna hamnar på samma höjd i båda korten. */
:root body .ha-tjanstpuff {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: auto !important;
  min-height: 100px; /* samma höjd i båda korten även när texten blir två rader */
  box-sizing: border-box;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}
:root body .ha-erbjudande ul:has(+ .ha-tjanstpuff) { margin-bottom: 24px; }
:root body .ha-tjanstpuff > .wp-block-image { flex: none; width: 72px; margin: 0 !important; }
:root body .ha-tjanstpuff > .wp-block-image img { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: 6px; }
:root body .ha-tjanstpuff__text { min-width: 0; }
:root body .ha-tjanstkort .ha-tjanstpuff__text > p { margin: 0; color: var(--wp--preset--color--primary); font-size: 14px; line-height: 1.4; }
:root body .ha-tjanstkort .ha-tjanstpuff__text > p.ha-tjanstpuff__rubrik { margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
:root body .ha-tjanstpuff + .ha-erbjudande__knapp { margin-top: 24px !important; }

/* Två kolumner + rutor (blå sektion) */
:root body .ha-tvakolumn { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
:root body .ha-tvakolumn > *, :root body .ha-tvakolumn__del > * { margin: 0; min-width: 0; }
:root body .ha-rutor { gap: 20px; }
:root body .ha-ruta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border-radius: 11px;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
}
:root body .ha-ruta > * { margin: 0; }
:root body .ha-sektion .ha-ruta > h3 {
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
}
:root body .ha-ruta > p { font-size: 15.5px; line-height: 1.55; }

/* Siffror */
:root body .ha-siffror { gap: 40px; margin-top: 36px; }
:root body .ha-siffra > * { margin: 0; }
:root body .ha-siffra__tal { margin-bottom: 12px !important; color: var(--wp--preset--color--secondary); font-family: var(--wp--preset--font-family--heading); font-size: 64px; line-height: 1; }
:root body .ha-siffra > h3 {
  margin-bottom: 10px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}
:root body .ha-siffra > p:last-child { font-size: 16px; line-height: 1.55; }

/* Stort citat */
:root body .ha-storcitat { margin: 0; padding: 0; border: 0; text-align: center; }
:root body .ha-storcitat p {
  max-width: 880px;
  margin: 0 auto 28px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(30px, 3.6vw, 44px);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.3;
}
:root body .ha-storcitat cite { color: var(--wp--preset--color--secondary); font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* Underrubrik, paket, etiketter, fördelar */
:root body .ha-sektion .ha-underrubrik {
  margin: 0 0 12px;
  color: var(--wp--preset--color--secondary);
  font-size: 34px;
  letter-spacing: normal;
  line-height: 1.15;
  text-transform: none;
}
:root body .ha-sektion--fortsatt .ha-sektion__inner > p { font-size: 18px; line-height: 1.6; }
:root body .ha-paket { padding: 28px 26px; border-radius: 20px; background: var(--ha-yta, var(--wp--preset--color--secondary)); color: var(--ha-yta-text, var(--wp--preset--color--background)); text-align: center; }
:root body .ha-paket:nth-child(2) { background: var(--wp--preset--color--primary); color: var(--ha-orange-text, var(--wp--preset--color--background)); }
:root body .ha-paket > * { margin: 0; }
:root body .ha-paket > h3 { margin-bottom: 6px; color: inherit; font-family: var(--wp--preset--font-family--heading); font-size: 32px; font-style: normal; font-weight: 400; line-height: 1.3; }
:root body .ha-paket__antal { font-family: var(--wp--preset--font-family--body); font-size: 44px; font-weight: 400; line-height: 1.1; }
:root body .ha-paket__tid { margin-top: 6px !important; font-size: 14px; font-weight: 500; letter-spacing: .08em; opacity: .9; text-transform: uppercase; }
:root body .ha-etiketter { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0 !important; padding: 0; list-style: none; }
:root body .ha-etiketter > li {
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 38px;
  color: var(--wp--preset--color--primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.5;
  text-transform: uppercase;
}
:root body .ha-fordelar { gap: 32px; }
:root body .ha-fordelar__kolumn > * { margin: 0; }
:root body .ha-fordelar__kolumn > h4 { margin-bottom: 0; color: var(--wp--preset--color--primary); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
:root body .ha-fordel { margin-top: 12px !important; font-size: 15.5px; line-height: 1.5; }
:root body .ha-fordel strong { color: var(--wp--preset--color--secondary); font-family: var(--wp--preset--font-family--body); font-size: 22px; font-weight: 400; line-height: 1.5; }

/* Process */
:root body .ha-stegen { gap: 48px 40px; margin-top: 64px; }
:root body .ha-steg { padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
:root body .ha-steg > * { margin: 0; }
:root body .ha-steg__nr { margin-bottom: 12px !important; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); font-size: 72px; line-height: 1; }
/* Aldrig orange (eller blå) siffror på blått (Mika 2026-10-13): offwhite i blå sektioner.
   Sektionens textfärg (--ha-yta-text), så att Nyhetsbrev får ljusa siffror på mörkgrått (lek 2026-10-13).
   Kundcase har egna röda siffror (Kundcase-färger nedan). */
:root body .ha-sektion--bla .ha-steg__nr,
:root body .ha-sektion--bla .ha-siffra__tal { color: var(--ha-yta-text, var(--wp--preset--color--background)); }
:root body .ha-steg > h3 { margin-bottom: 10px; color: inherit; font-family: var(--wp--preset--font-family--heading); font-size: 30px; font-style: normal; font-weight: 400; line-height: 1.1; }
:root body .ha-steg > p:last-child { color: inherit; font-size: 16px; line-height: 1.55; opacity: .92; }
:root body .ha-notis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 72px !important;
  padding: 32px 36px;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 20px;
}
:root body .ha-notis > * { margin: 0; }
:root body .ha-notis > p { max-width: 620px; font-family: var(--wp--preset--font-family--body); font-size: 28px; font-weight: 400; line-height: 1.3; }
:root body .ha-sektion--bla .ha-notis em { color: var(--wp--preset--color--primary); }

/* Bockar */
:root body .ha-bockar { display: grid; gap: 14px; margin: 40px 0 !important; padding: 0; list-style: none; }
:root body .ha-bockar > li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.3;
}
:root body .ha-bockar > li::before { content: "✓"; color: var(--wp--preset--color--secondary); font-family: var(--wp--preset--font-family--body); font-size: 22px; }

/* Vanliga frågor (blocket Detaljer) */
:root body .ha-fragor { margin-top: 48px !important; border-top: 1px solid var(--wp--preset--color--primary); }
:root body .ha-fragor > * { margin: 0; }
:root body .ha-fragor details { border-bottom: 1px solid var(--wp--preset--color--primary); }
:root body .ha-fragor summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  color: var(--wp--preset--color--secondary);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--body);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  list-style: none;
}
:root body .ha-fragor summary::-webkit-details-marker { display: none; }
:root body .ha-fragor summary::after { content: "+"; flex: none; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--body); font-size: 28px; transition: transform .2s; }
:root body .ha-fragor details[open] summary::after { transform: rotate(45deg); }
:root body .ha-fragor summary:hover { color: var(--wp--preset--color--primary); }
:root body .ha-fragor details > :not(summary) { max-width: 760px; margin: 0 0 10px; padding: 0 4px; font-size: 17px; line-height: 1.6; }
:root body .ha-fragor details > ul { padding-left: 24px; }
:root body .ha-fragor details > :last-child { margin-bottom: 0; padding-bottom: 26px; }

/* Avslut (orange) */
:root body .ha-avslut { text-align: center; }
:root body .ha-avslut .ha-display { margin-bottom: 36px !important; font-size: clamp(48px, 7vw, 96px); line-height: 1.12; }
:root body .ha-avslut .wp-block-buttons { justify-content: center; }
:root body .ha-avslut__kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 36px !important; font-size: 17px; }
:root body .ha-avslut__kontakt a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 60%, transparent); }

@media (max-width: 991px) {
  :root body .ha-sektion { padding: 88px 24px; }
  :root body .ha-tjanst-hero { padding: 96px 24px 72px; }
  :root body .ha-sektion--fortsatt { padding-top: 0; }
  :root body .ha-rutnat { grid-template-columns: 1fr 1fr; }
  :root body .ha-tvakolumn { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  :root body .ha-rutnat { grid-template-columns: 1fr; }
  :root body .ha-lead { font-size: 23px; }
  :root body .ha-bockar > li { font-size: 24px; }
  :root body .ha-fragor summary { font-size: 21px; }
  :root body .ha-notis > p { font-size: 23px; }
}
@media (max-width: 479px) {
  :root body .ha-sektion { padding: 72px 16px; }
  :root body .ha-tjanst-hero { padding: 56px 16px 40px; }
  :root body .ha-sektion--fortsatt { padding-top: 0; }
  :root body .ha-notis { padding: 24px 20px; }
  :root body .ha-sektion .wp-block-button__link { padding: 12px 24px; }
}

/* === Kundcase-färger (mallen "Tjänstesida – Kundcase-färger") ===
   Från Kundcase-temat i Offertsson (adminsson/verktyg/offertsson/mallar/
   kundcase-sidor.mjs): rött #94402E rubriker och knappar, persika #F9DEB9
   bakgrund, gult #F4BD5C band och paneler, svart brödtext, vitt på rött.
   Sidhuvudet är också rött (se Kundcase-sidhuvud); sidfoten är Hatten avs. */
:root body .ha-farg-kundcase,
html.ha-profil-kundcase body .ha-farg-profil {
  --wp--preset--color--primary: #94402e;
  --wp--preset--color--secondary: #000;
  --wp--preset--color--background: #f9deb9;
  --wp--preset--color--foreground: #000;
  --ha-yta: #f4bd5c;
  --ha-yta-text: #000;
  --ha-orange-text: #fff;
  background: #f9deb9;
  color: #000;
}
:root body .ha-farg-kundcase .ha-ruta,
html.ha-profil-kundcase body .ha-farg-profil .ha-ruta { background: #f9deb9; }
:root body .ha-farg-kundcase .ha-tjanstkort:hover,
:root body .ha-farg-kundcase .ha-kort:hover,
html.ha-profil-kundcase body .ha-farg-profil .ha-tjanstkort:hover,
html.ha-profil-kundcase body .ha-farg-profil .ha-kort:hover { background: #fbe8cf; }
:root body .ha-farg-kundcase .ha-sektion--vit,
html.ha-profil-kundcase body .ha-farg-profil .ha-sektion--vit { background: #fbe8cf; }
:root body .ha-farg-kundcase .ha-sektion--bla .ha-steg__nr,
html.ha-profil-kundcase body .ha-farg-profil .ha-sektion--bla .ha-steg__nr { color: #94402e; }
:root body .ha-farg-kundcase .ha-sektion--orange .is-style-outline > .wp-block-button__link,
html.ha-profil-kundcase body .ha-farg-profil .ha-sektion--orange .is-style-outline > .wp-block-button__link { background: #fff; border-color: #fff; color: #94402e; }

/* === Nyhetsbrev-färger (mallen "Tjänstesida – Nyhetsbrev-färger") ===
   Mörkt läge med tre färger (Mika 2026-10-12): nästan svart bakgrund #161616,
   offwhite text #eeebe5 (inte rent vitt, för att det inte ska sticka) och en
   mörkgrå #2b2b2b för plattorna och grå #5a5753 för vartannat ord i ordraderna (test: fyra toner) (de blå sektionerna, avslutet och två av
   paketen). All text är ljus. Sidfoten är Hatten avs. */
:root body .ha-farg-nyhetsbrev,
html.ha-profil-nyhetsbrev body .ha-farg-profil {
  --wp--preset--color--primary: #eeebe5;
  --wp--preset--color--secondary: #eeebe5;
  --wp--preset--color--background: #161616;
  --wp--preset--color--foreground: #eeebe5;
  --ha-yta: #2b2b2b;
  --ha-yta-text: #eeebe5;
  --ha-orange-text: #eeebe5;
  background: #161616;
  color: #eeebe5;
}
:root body .ha-farg-nyhetsbrev .ha-ruta,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-ruta { background: #161616; color: #eeebe5; }
:root body .ha-farg-nyhetsbrev .ha-tjanstkort:hover,
:root body .ha-farg-nyhetsbrev .ha-kort:hover,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-tjanstkort:hover,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-kort:hover { background: #2b2b2b; }
:root body .ha-farg-nyhetsbrev .ha-sektion--vit,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-sektion--vit { background: #161616; color: #eeebe5; }
:root body .ha-farg-nyhetsbrev .ha-sektion--orange,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-sektion--orange { background: #2b2b2b; color: #eeebe5; }
:root body .ha-farg-nyhetsbrev .ha-paket:nth-child(2),
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-paket:nth-child(2) { background: #161616; color: #eeebe5; outline: 1px solid #eeebe5; outline-offset: -1px; }
:root body .ha-farg-nyhetsbrev .ha-sektion .wp-block-button__link,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-sektion .wp-block-button__link { background: #eeebe5; border-color: #eeebe5; color: #161616; }
:root body .ha-farg-nyhetsbrev .ha-sektion .wp-block-button__link:hover,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-sektion .wp-block-button__link:hover { background: #2b2b2b; border-color: #eeebe5; color: #eeebe5; }
:root body .ha-farg-nyhetsbrev .ha-sektion .is-style-outline > .wp-block-button__link,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-sektion .is-style-outline > .wp-block-button__link { background: transparent; border-color: #eeebe5; color: #eeebe5; }
:root body .ha-farg-nyhetsbrev .ha-sektion .is-style-outline > .wp-block-button__link:hover,
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-sektion .is-style-outline > .wp-block-button__link:hover { background: #eeebe5; color: #161616; }

:root body .ha-farg-nyhetsbrev .ha-ordrader__ord.is-bla,
:root body .ha-farg-nyhetsbrev ul.ha-ordrader > li:nth-child(odd),
html.ha-profil-nyhetsbrev body .ha-farg-profil .ha-ordrader__ord.is-bla,
html.ha-profil-nyhetsbrev body .ha-farg-profil ul.ha-ordrader > li:nth-child(odd) { color: #5a5753; }

/* Respektera reducerad rörelse. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* === Kontaktknappar i tjänstesektionerna (bygg-tjanstmonster.py cta()) ===
   Varannan sektion slutar med en knapp till /kontakt/. Kontaktbandet är ett
   kort mönster med en rad och en knapp, centrerat. */
:root body .ha-sektion__cta { margin-top: 40px !important; }
:root body .ha-kontaktband { text-align: center; }
:root body .ha-kontaktband .ha-lead { margin: 0 auto; max-width: 640px; }
:root body .ha-kontaktband .ha-sektion__cta { justify-content: center; margin-top: 24px !important; }

/* === Loggan (Mika 2026-10-20, 2.40.0) ===
   Hatten av-loggan på alla sidor, ensam (tjänsterna nås via Tjänster i
   menyn). Den har sidhuvudets färg, så att den följer profilen: orange på de
   ljusa sidhuvudena, röd på Kundcases gula, vit på Webbssons blå, offwhite på
   Nyhetsbrevs svarta och gul på Brand Spirits röda. Tidigare (2.17–2.39)
   bytte tjänsternas loggor plats; se arkiv/tema-backups om idén tas upp igen.
   Mellan profilerna tonar sidhuvudet över till de nya färgerna (view
   transitions, Chrome och Safari). */
.ha-site-header .ha-loggor { margin: 0; flex: 0 0 auto; }
.ha-site-header .ha-mark { display: block; color: var(--wp--preset--color--primary); text-decoration: none; line-height: 1; transition: opacity .15s; }
.ha-site-header .ha-mark:hover { opacity: .65; }
.ha-site-header .ha-mark svg { display: block; width: min(240px, calc(100vw - 94px)); height: auto; aspect-ratio: 240 / 41; }

@view-transition { navigation: auto; }
.ha-site-header { view-transition-name: ha-sidhuvud; }
::view-transition-group(ha-sidhuvud) { animation-duration: .9s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Kortrubriker (beslut 2026-10-12): TAN Misfits 24px i gemener, lätt spärrade,
   som en mindre variant av Webflows h2. Gäller tjänstekort, erbjudanden, rutor,
   paket, processteg, Old Home-kort och casekort. Rutorna har längre rubriker
   och är 20px så att långa ord får plats. */
:root body .ha-tjanstkort > h3,
:root body .ha-sektion .ha-ruta > h3,
:root body .ha-paket > h3,
:root body .ha-steg > h3,
:root body .ha-kort > .wp-block-heading,
:root body .ha-casekort > .wp-block-post-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.5;
  text-transform: none;
}
:root body .ha-sektion .ha-ruta > h3 { font-size: 20px; overflow-wrap: break-word; hyphens: manual; }

/* === Kontakt (steg 4, 2026-10-13) ===
   Formuläret kommer från tillägget (blocket Kontaktformulär) och tar färgerna
   från där det står: sidans färgmall eller panelens ha-farg-<utseende>.
   --ha-falt är fältens bakgrund, --ha-knapp-text texten på fyllda knappar. */
:root body { --ha-falt: #fff; --ha-knapp-text: var(--wp--preset--color--background); }
:root body .ha-farg-kundcase,
html.ha-profil-kundcase body .ha-farg-profil { --ha-falt: #fdf3e6; --ha-knapp-text: #fff; }
:root body .ha-farg-nyhetsbrev,
html.ha-profil-nyhetsbrev body .ha-farg-profil { --ha-falt: #2b2b2b; --ha-knapp-text: #161616; }

.ha-kontakt { color: var(--wp--preset--color--foreground); }
.ha-kontakt [hidden] { display: none !important; }
.ha-kontakt__bokaknapp {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 18px 24px;
  border-radius: 37px;
  background: var(--wp--preset--color--primary);
  color: var(--ha-knapp-text);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.ha-kontakt__bokaknapp::after { content: "→"; font-size: 20px; line-height: 1; }
.ha-kontakt__bokaknapp:hover, .ha-kontakt__bokaknapp:focus-visible {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--background);
}
.ha-farg-nyhetsbrev .ha-kontakt__bokaknapp:hover, .ha-farg-nyhetsbrev .ha-kontakt__bokaknapp:focus-visible,
html.ha-profil-nyhetsbrev .ha-farg-profil .ha-kontakt__bokaknapp:hover,
html.ha-profil-nyhetsbrev .ha-farg-profil .ha-kontakt__bokaknapp:focus-visible {
  background: #2b2b2b; color: #eeebe5; outline: 1px solid #eeebe5; outline-offset: -1px;
}
.ha-kontakt__eller {
  margin: 32px 0 16px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}
.ha-kontakt__formular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.ha-kontakt__formular > * { margin: 0; min-width: 0; }
.ha-kontakt__falt--bred, .ha-kontakt__skicka, .ha-kontakt__fel { grid-column: 1 / -1; }
.ha-kontakt__falt label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ha-kontakt__valfritt { opacity: .65; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ha-kontakt__falt input, .ha-kontakt__falt textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 0;
  background: var(--ha-falt);
  color: var(--wp--preset--color--foreground);
  font: inherit;
  font-size: 16px; /* 16px: iOS zoomar inte in */
  line-height: 1.5;
}
.ha-kontakt__falt textarea { min-height: 132px; resize: vertical; }
.ha-kontakt__falt input:focus-visible, .ha-kontakt__falt textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--secondary);
  outline-offset: 1px;
}
.ha-kontakt__skicka button {
  padding: 12px 32px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 37px;
  background: transparent;
  color: var(--wp--preset--color--primary);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ha-kontakt__skicka button:hover, .ha-kontakt__skicka button:focus-visible { background: var(--wp--preset--color--primary); color: var(--ha-knapp-text); }
.ha-kontakt__skicka button:disabled { opacity: .6; cursor: progress; }
.ha-kontakt__fel { padding: 12px 14px; border-left: 3px solid currentColor; font-size: 15px; }
.ha-kontakt__falla { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ha-kontakt__tack { padding: 32px 0; outline: none; }
.ha-kontakt__tack p { margin: 0; font-size: 18px; }
.ha-kontakt__tack .ha-kontakt__tackrubrik {
  margin-bottom: 12px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
}
@media (max-width: 479px) {
  .ha-kontakt__formular { grid-template-columns: 1fr; }
  .ha-kontakt__bokaknapp { font-size: 15px; padding: 16px 20px; }
}

/* Panelen: glider in från höger, hela höjden. */
.ha-kontaktpanel {
  position: fixed;
  inset: 0 0 0 auto;
  box-sizing: border-box;
  width: min(520px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .2);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ha-kontaktpanel[open] { animation: ha-panel-in .3s cubic-bezier(.2, .8, .2, 1); }
.ha-kontaktpanel::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes ha-panel-in { from { transform: translateX(100%); } }
.ha-kontaktpanel__yta { min-height: 100%; box-sizing: border-box; padding: 24px 32px 40px; }
.ha-kontaktpanel__huvud { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.ha-kontaktpanel__rubrik {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 28px;
  line-height: 1.2;
}
.ha-kontaktpanel__stang {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--primary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.ha-kontaktpanel__stang:hover, .ha-kontaktpanel__stang:focus-visible { background: var(--wp--preset--color--primary); color: var(--ha-knapp-text); }
.ha-kontaktpanel__direkt { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 32px 0 0; font-size: 15px; }
.ha-kontaktpanel__direkt a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 50%, transparent); }
@media (max-width: 479px) {
  .ha-kontaktpanel__yta { padding: 16px 16px 32px; }
  .ha-kontaktpanel__rubrik { font-size: 22px; }
}

/* Kontaktsidorna: formuläret + direktvägar bredvid (under varandra i mobil). */
:root body .ha-kontaktsida__rutnat { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 64px; align-items: start; }
:root body .ha-kontaktsida__rutnat > * { margin: 0; }
:root body .ha-kontaktsida__direkt > * { margin: 0; }
:root body .ha-kontaktsida__direkt h2 { margin-bottom: 16px; font-size: 24px; text-transform: lowercase; letter-spacing: .03em; color: var(--wp--preset--color--primary); }
:root body .ha-kontaktsida__direkt p { font-size: 18px; line-height: 1.7; }
:root body .ha-kontaktsida__direkt p + h2 { margin-top: 40px; }
:root body .ha-kontaktsida__direkt a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 50%, transparent); }
:root body .ha-kontaktsida__direkt a:hover { color: var(--wp--preset--color--primary); }
@media (max-width: 991px) {
  :root body .ha-kontaktsida__rutnat { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}

/* Lediga tider ("Boka startsnack direkt", TEST 2026-10-13): ram i sidans
   färg, dagar som en rad knappar (scrollar i sidled om de inte får plats),
   tiderna i ett rutnät. Vald dag/tid = fylld. */
.ha-kontakt__tider { padding: 20px; border: 1px solid var(--wp--preset--color--primary); }
.ha-kontakt__tider > * { margin: 0; }
.ha-kontakt__tiderrubrik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px !important;
  color: var(--wp--preset--color--primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ha-kontakt__langd { opacity: .7; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ha-kontakt__dagar {
  display: flex;
  gap: 8px;
  margin: 0 -20px 14px !important;
  padding: 0 20px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.ha-kontakt__dag, .ha-kontakt__tid {
  border: 1px solid var(--wp--preset--color--primary);
  background: transparent;
  color: var(--wp--preset--color--primary);
  font: inherit;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ha-kontakt__dag {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 8px 10px;
  scroll-snap-align: start;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
.ha-kontakt__dag span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ha-kontakt__tidlista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ha-kontakt__tid { padding: 9px 4px; border-radius: 37px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ha-kontakt__dag:hover, .ha-kontakt__tid:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); }
.ha-kontakt__dag[aria-pressed="true"], .ha-kontakt__tid[aria-pressed="true"] {
  background: var(--wp--preset--color--primary);
  color: var(--ha-knapp-text);
}
.ha-kontakt__dag:focus-visible, .ha-kontakt__tid:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; }
.ha-kontakt__testnotis { margin-top: 12px !important; font-size: 12px; opacity: .7; }
@media (max-width: 479px) {
  .ha-kontakt__tider { padding: 16px; }
  .ha-kontakt__dagar { margin: 0 -16px 12px !important; padding: 0 16px 4px; }
  .ha-kontakt__tidlista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Profiler (Mika 2026-10-13, se Profiler i functions.php). Sidhuvud och
   loggor står ovan; här sidfoten, kontaktpanelens rubrik, Tjänster-sidan
   och casekorten.
   ========================================================================== */

/* Sidfoten följer profilen: Hatten av blå, Kundcase röd med vit text,
   Nyhetsbrev svart med offwhite text. Loggan är offwhite i alla. */
html.ha-profil-kundcase .ha-site-footer {
  --wp--preset--color--secondary: #94402e;
  --wp--preset--color--background: #fff;
}
html.ha-profil-nyhetsbrev .ha-site-footer {
  --wp--preset--color--secondary: #000;
  --wp--preset--color--background: #eeebe5;
}

/* Kontaktpanelens rubrik: den valda profilens. */
.ha-panelrubrik:not(.ha-panelrubrik--hattenav),
html.ha-profil-kundcase .ha-panelrubrik--hattenav,
html.ha-profil-nyhetsbrev .ha-panelrubrik--hattenav,
html.ha-profil-webbsson .ha-panelrubrik--hattenav,
html.ha-profil-brandspirit .ha-panelrubrik--hattenav { display: none; }
html.ha-profil-kundcase .ha-panelrubrik--kundcase,
html.ha-profil-nyhetsbrev .ha-panelrubrik--nyhetsbrev,
html.ha-profil-webbsson .ha-panelrubrik--webbsson,
html.ha-profil-brandspirit .ha-panelrubrik--brandspirit { display: inline; }

/* Tjänster: färgkodad scrollsida. Överst Hatten av-introt (sidans text),
   sedan en skärmfylld sektion per tjänst i tjänstens egna färger
   (ha-farg-kundcase/-nyhetsbrev från functions.php): Kundcase persika och
   rött, Nyhetsbrev svartvitt. Sidhuvudet följer den valda profilen. */
:root body .ha-tjanstblock { margin: 0; }
:root body .ha-tjanstblock__lista { margin: 0; padding: 0; list-style: none; }
:root body .ha-tjanstblock__lista > li {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  margin: 0;
  padding: 96px 24px;
  color: var(--wp--preset--color--foreground);
}
:root body .ha-tjanstblock__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
:root body .ha-tjanstblock__inner > * { margin: 0; }
:root body .ha-tjanstblock__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
:root body .ha-tjanstblock__text > * { margin: 0; }
:root body .ha-tjanstblock__kicker { margin-bottom: 12px !important; }
:root body .ha-tjanstblock__namn {
  margin: 0 0 32px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(36px, calc((100vw - 48px) / 8.2), 140px); /* "Nyhetsbrev" ≈ 8 teckengrader, ryms i 375px */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
  overflow-wrap: break-word;
  hyphens: manual;
}
:root body .ha-tjanstblock__namn a { color: inherit; text-decoration: none; }
:root body .ha-tjanstblock .ha-tjanst-text { max-width: 560px; margin: 0; font-size: 20px; line-height: 1.55; }
:root body .ha-tjanstblock__knapp {
  display: inline-block;
  margin-top: 40px !important;
  padding: 12px 32px;
  border-radius: 38px;
  background: var(--wp--preset--color--primary);
  color: var(--ha-knapp-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--ha-lh);
  text-decoration: none;
  text-transform: uppercase;
}
:root body .ha-tjanstblock__knapp:hover, :root body .ha-tjanstblock__knapp:focus-visible { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--background); }
:root body .ha-tjanstblock__bild { flex: 0 1 440px; min-width: 0; }
:root body .ha-tjanstblock__bild img { display: block; width: 100%; height: auto; border-radius: 12px; aspect-ratio: 4 / 5; object-fit: cover; }
/* Nyhetsbrev: helt svartvitt, även bilden. */
:root body .ha-tjanstblock__lista > li.ha-farg-nyhetsbrev .ha-tjanstblock__bild img { filter: grayscale(1); }
:root body .ha-tjanstblock__lista > li.ha-farg-nyhetsbrev .ha-tjanstblock__knapp:hover,
:root body .ha-tjanstblock__lista > li.ha-farg-nyhetsbrev .ha-tjanstblock__knapp:focus-visible { background: #2b2b2b; color: #eeebe5; outline: 1px solid #eeebe5; }
@media (max-width: 991px) {
  :root body .ha-tjanstblock__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  :root body .ha-tjanstblock__bild { flex: none; width: 100%; max-width: 480px; }
  :root body .ha-tjanstblock__bild img { aspect-ratio: 3 / 2; }
}
@media (max-width: 479px) {
  :root body .ha-tjanstblock__lista > li { padding: 72px 16px; min-height: calc(100svh - 61px); }
  :root body .ha-tjanstblock .ha-tjanst-text { font-size: 18px; }
}

/* Tjänster: Hatten av ("alltjänsten") är en sektion som de andra två, i
   Hatten av-färger, med sidans text (Mika 2026-10-13). Den valda profilens
   tjänst ligger överst, sedan bandet "Våra andra tjänster:" och resten.
   Ordningen görs med CSS order (sidan är likadan för alla, så sidcachen
   fungerar): listan och frågeblocket är display: contents, så att varje
   tjänst blir ett eget led i main. */
:root body .ha-tjanster { display: flex; flex-direction: column; }
:root body .ha-tjanster .ha-tjanstblock,
:root body .ha-tjanster .ha-tjanstblock__lista { display: contents; }
html.ha-profil-kundcase body .ha-tjanstblock__lista > li.ha-farg-kundcase,
html.ha-profil-nyhetsbrev body .ha-tjanstblock__lista > li.ha-farg-nyhetsbrev { order: -2; }
html.ha-profil-kundcase body .ha-tjanster-andra,
html.ha-profil-nyhetsbrev body .ha-tjanster-andra { order: -1; }

:root body .ha-tjanster-hero {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  padding: 96px 24px;
  background: var(--wp--preset--color--background);
}
:root body .ha-tjanster-hero__inner { width: 100%; max-width: 1100px; margin: 0 auto; }
:root body .ha-tjanster-intro { display: flex; flex-direction: column; align-items: flex-start; }
:root body .ha-tjanster-intro > * { margin: 0; max-width: 100%; }
:root body .ha-tjanster-intro > .ha-kicker { margin-bottom: 12px !important; }
:root body .ha-tjanster-intro > .ha-tjanster-namn {
  margin: 0 0 32px;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  /* "Hatten av" är ca 6 teckengrader bred i TAN Misfits: så stor som
     möjligt men alltid på en rad (mätt 375–1440px). */
  font-size: clamp(56px, calc((100vw - 48px) / 6.4), 160px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
:root body .ha-tjanster-intro > p:not(.ha-kicker) { max-width: 680px; color: var(--wp--preset--color--foreground); font-size: 20px; line-height: 1.55; }
:root body .ha-tjanster-intro > p + p:not(.ha-kicker) { margin-top: 16px; }
:root body .ha-tjanster-intro > .wp-block-buttons { margin-top: 40px; }

:root body .ha-tjanster-andra { padding: 56px 24px; background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--background); }
/* Bandet tar den valda profilens färger: Hatten av blått, Kundcase rött,
   Nyhetsbrev mörkgrått. */
html.ha-profil-kundcase body .ha-tjanster-andra { background: #94402e; color: #fff; }
html.ha-profil-nyhetsbrev body .ha-tjanster-andra { background: #2b2b2b; color: #eeebe5; }
:root body .ha-tjanster-andra__rubrik {
  max-width: 1100px;
  margin: 0 auto;
  color: inherit;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-transform: none;
}
@media (max-width: 767px) {
  :root body .ha-rutnat--2 { grid-template-columns: 1fr; }
  :root body .ha-tjanst-hero p.ha-hero-overgang { font-size: 24px; }
}
@media (max-width: 479px) {
  :root body .ha-tjanster-hero { padding: 72px 16px; min-height: calc(100svh - 61px); }
  :root body .ha-tjanster-intro > p:not(.ha-kicker) { font-size: 18px; }
  :root body .ha-tjanster-andra { padding: 40px 16px; }
}

/* Casekort: vilken tjänst caset är gjort inom, som en etikett i tjänstens
   färg. Den valda profilens case kommer först i listorna. */
:root body .ha-casekort__tjanst { margin: 20px 0 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
:root body .ha-casekort__tjanst a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 38px;
  background: #fd6f34;
  color: #fff;
  text-decoration: none;
}
:root body .ha-casekort__tjanst .wp-block-post-terms__separator { display: none; }
:root body .ha-casekort__tjanst a + a { margin-left: 6px; }
:root body .ha-casekort__tjanst a[href*="/kundcase/"] { background: #94402e; color: #fff; }
:root body .ha-casekort__tjanst a[href*="/nyhetsbrev/"] { background: #161616; color: #eeebe5; outline: 1px solid #eeebe5; outline-offset: -1px; }
:root body .ha-casekort__tjanst + .wp-block-post-title { margin-top: 12px; }
html.ha-profil-kundcase .ha-casekort-rutnat > li.tjanst-kundcase,
html.ha-profil-nyhetsbrev .ha-casekort-rutnat > li.tjanst-nyhetsbrev { order: -1; }

/* Kundcase och Nyhetsbrev i sina egna färger (Mika 2026-10-13: "de är
   snygga tillsammans"): korten på startsidan (ha-tjanstkort + ha-farg-*) och
   de två halvorna sist på Hatten avs tjänstesida (ha-duo). */
:root body .ha-tjanstkort.ha-farg-kundcase:hover { background: #fbe8cf; }
:root body .ha-tjanstkort.ha-farg-nyhetsbrev:hover { background: #2b2b2b; }
:root body .ha-tjanstkort.ha-farg-nyhetsbrev .wp-block-button__link:hover { background: #2b2b2b; color: #eeebe5; outline: 1px solid #eeebe5; }
:root body .ha-tjanstkort[class*="ha-farg-"] > h3 { text-transform: none; font-size: 34px; }

:root body .ha-duo-sektion { padding: 0 !important; }
:root body .ha-duo-sektion > .ha-sektion__inner { max-width: none; padding: 0; }
:root body .ha-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
:root body .ha-duo__del {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  min-height: 70vh;
  margin: 0;
  padding: 96px clamp(24px, 6vw, 96px);
}
:root body .ha-duo__del > * { margin: 0; }
:root body .ha-duo__del .ha-kicker { margin-bottom: -12px !important; }
:root body .ha-duo__namn {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(36px, calc((50vw - 96px) / 8.2), 96px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
:root body .ha-duo__text { max-width: 440px; color: var(--wp--preset--color--foreground); font-size: 18px; line-height: 1.55; }
:root body .ha-duo__del .wp-block-buttons { margin-top: 16px; }
/* Manifestet /manifest/ (lek 2026-10-13): Linkedin-artikeln som löpande text.
   Smal lässpalt, omslagsbild i full bredd med bildtext, lyft citat. */
:root body .ha-artikel-hero { padding-bottom: 56px; }
:root body .ha-artikel .ha-sektion__inner { max-width: 720px; margin-left: auto; margin-right: auto; }
:root body .ha-artikel-hero .ha-lead { max-width: 720px; }
:root body .ha-artikel-hero .ha-sektion__inner > * { margin: 0; }
:root body .ha-artikel-hero .ha-ingress { max-width: 820px; margin-top: 36px !important; text-wrap: balance; }
:root body .ha-artikel-hero .ha-lead { margin-top: 28px !important; }
:root body .ha-tjanst-hero .ha-manifestlank { margin-top: -12px !important; }
:root body .ha-artikel__rubrik {
  margin-top: 20px !important;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(36px, 6vw, 72px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
}
:root body .ha-artikel__bild { margin: 0 !important; }
:root body .ha-artikel__bild img { display: block; width: 100%; max-height: 80vh; object-fit: cover; }
:root body .ha-artikel__bild figcaption { margin: 12px auto 0; padding: 0 24px; max-width: 720px; font-size: 14px; text-align: center; opacity: .75; }
:root body .ha-artikel { padding-top: 72px; }
:root body .ha-artikel .ha-sektion__inner > * { margin: 0 0 24px; }
:root body .ha-artikel p { font-size: 20px; line-height: 1.65; }
:root body .ha-artikel h2 {
  margin-top: 56px !important;
  margin-bottom: 20px !important;
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 36px;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
:root body .ha-artikel h2:first-child { margin-top: 0 !important; }
:root body .ha-artikel h2, :root body .ha-artikel__rubrik { text-wrap: balance; }
:root body .ha-artikel__citat { margin: 48px 0 !important; padding: 0 0 0 28px; border-left: 3px solid var(--wp--preset--color--primary); }
:root body .ha-artikel__citat p { margin: 0; color: var(--wp--preset--color--secondary); font-family: var(--wp--preset--font-family--body); font-size: 30px; font-weight: 400; line-height: 1.35; }
:root body .ha-artikel__citat strong { color: var(--wp--preset--color--primary); font-weight: 300; }
:root body .ha-artikel__ps { margin-top: 32px !important; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 18px !important; }
:root body .ha-manifestlank { margin-top: 20px !important; font-weight: 500; }
:root body .ha-manifestlank a { text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 767px) {
  :root body .ha-artikel p { font-size: 18px; }
  :root body .ha-artikel h2 { font-size: 30px; }
  :root body .ha-artikel__citat p { font-size: 24px; }
}

/* Tjänster som delad skärm (Mika 2026-10-13 kväll): Kundcase och Nyhetsbrev som
   halva sidor, hela halvan klickbar (knappens ::before täcker halvan). */
:root body .ha-tjanster-innehall > * { margin: 0; }
:root body .ha-duo-sektion--skarm .ha-duo__del {
  position: relative;
  justify-content: center;
  min-height: calc(100svh - 76px - var(--wp-admin--admin-bar--height, 0px));
  transition: filter .2s;
}
:root body .ha-duo-sektion--skarm .ha-duo__namn { font-size: clamp(36px, calc((50vw - 2 * clamp(24px, 6vw, 96px)) / 8.2), 140px); } /* "Nyhetsbrev" ≈ 7,8 em */
:root body .ha-duo-sektion--skarm .wp-block-button__link::before { content: ""; position: absolute; inset: 0; }
:root body .ha-duo-sektion--skarm .ha-duo__del:hover { filter: brightness(1.04); }
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-nyhetsbrev:hover { filter: brightness(1.25); }
@media (max-width: 767px) {
  :root body .ha-duo-sektion--skarm .ha-duo__del { min-height: calc((100svh - 76px) / 2); padding: 48px 16px; }
  :root body .ha-duo-sektion--skarm .ha-duo__namn { font-size: clamp(36px, calc((100vw - 32px) / 8.2), 96px); }
}

/* Växlande ord i rubriker (ha-vaxlar, vaxlar.js), som på kundcase.se. */
:root body .ha-vaxlar { display: inline-block; color: var(--wp--preset--color--secondary); font-style: normal; transition: opacity .35s, transform .35s; }
:root body .ha-vaxlar.is-ut { opacity: 0; transform: translateY(.25em); }

/* Teamet på /om-oss/ (lek 2026-10-13, som Om oss på kundcase.se): bild, namn,
   roll, text, specialområden, kul fakta och "Sagt om" som fälls ut. */
:root body .ha-team { gap: 56px 40px; }
:root body .ha-person { display: flex; flex-direction: column; gap: 12px; }
:root body .ha-person > * { margin: 0; }
:root body .ha-person__bild { margin: 0 0 12px !important; }
:root body .ha-person__bild img { display: block; width: 160px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
:root body .ha-person > h3 { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--body); font-size: 40px; font-style: normal; font-weight: 500; letter-spacing: -.01em; line-height: 1.05; text-transform: none; }
:root body .ha-person > .ha-kicker { margin-top: -4px !important; }
/* Titel och mejl tätt ihop (Mika 2026-10-14). */
:root body .ha-person > .ha-kicker:has(+ .ha-person__mejl) { margin-bottom: -6px !important; }
:root body .ha-person__mejl { font-size: 15px; }
:root body .ha-person__rubrik { margin-top: 8px !important; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:root body .ha-person__omraden { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
:root body .ha-person__omraden > li { margin: 0; padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: 14px; }
:root body .ha-person__kul { font-family: var(--wp--preset--font-family--body); font-size: 20px; font-style: normal; line-height: 1.4; font-weight: 400;}
:root body .ha-person__sagt { margin-top: 8px !important; border-top: 1px solid var(--wp--preset--color--primary); border-bottom: 1px solid var(--wp--preset--color--primary); }
:root body .ha-person__sagt summary { display: flex; justify-content: space-between; padding: 14px 2px; color: var(--wp--preset--color--primary); cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: .06em; list-style: none; text-transform: uppercase; }
:root body .ha-person__sagt summary::-webkit-details-marker { display: none; }
:root body .ha-person__sagt summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .2s; }
:root body .ha-person__sagt[open] summary::after { transform: rotate(45deg); }
:root body .ha-person__sagt > p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
:root body .ha-person__sagt > p:first-of-type::before { content: "”"; }
:root body .ha-person__sagt > p:first-of-type::after { content: "”"; }
:root body .ha-person__sagt > .ha-person__vem { margin-bottom: 18px; font-weight: 600; }
@media (max-width: 767px) {
  :root body .ha-person > h3 { font-size: 34px; }
  :root body .ha-person__bild img { width: 128px; }
}

/* Hatten avs egna färger tillbaka inne på Kundcase/Nyhetsbrev (halvan "Till
   Hatten av" i duon). Nyhetsbrev skriver över knapparna med fasta färger,
   så halvorna som inte är Nyhetsbrev får tillbaka de vanliga (lek 2026-10-13). */
:root body .ha-farg-hattenav {
  --wp--preset--color--primary: #fd6f34;
  --wp--preset--color--secondary: #007392;
  --wp--preset--color--background: #f6f4f2;
  --wp--preset--color--foreground: #1c1c21;
  --ha-yta: #007392;
  --ha-yta-text: #f6f4f2;
  --ha-orange-text: #f6f4f2;
  background: #f6f4f2;
  color: #1c1c21;
}
:root body .ha-farg-nyhetsbrev .ha-duo__del:not(.ha-farg-nyhetsbrev) .wp-block-button__link { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); }
:root body .ha-farg-nyhetsbrev .ha-duo__del:not(.ha-farg-nyhetsbrev) .wp-block-button__link:hover { background: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--background); }
@media (max-width: 767px) {
  :root body .ha-duo { grid-template-columns: 1fr; }
  :root body .ha-duo__del { min-height: 0; padding: 72px 16px; }
  :root body .ha-duo__namn { font-size: clamp(36px, calc((100vw - 32px) / 8.2), 96px); }
}

/* Tjänster: Hatten av-sektionens "Läs mer" ser ut som de andras. */
:root body .ha-tjanster-intro > .ha-tjanster-lasmer { margin-top: 24px; }
:root body .ha-tjanster-intro > .ha-tjanster-lasmer a { color: var(--ha-knapp-text); }

/* Dolda artiklar (/artikel/, single.html): rubriken i Saol (inte TAN, långa rubriker),
   ingressen är det egna utdraget, sedan bild, text och de två tjänsterna. */
:root body .ha-artikelsida .ha-artikel__rubrik { max-width: 900px; text-wrap: balance; overflow-wrap: break-word; }
:root body .ha-artikelsida .ha-artikel__ingress { max-width: 820px; margin-top: 28px !important; text-wrap: balance; }
:root body .ha-artikelsida .ha-artikel__bild img { aspect-ratio: auto !important; height: auto !important; }
:root body .ha-artikelsida .ha-duo-sektion { margin-top: 72px; }
:root body .ha-artikelsida .ha-artikel__ingress { color: var(--wp--preset--color--secondary); font-size: clamp(22px, 3vw, 32px); }
:root body .ha-artikel .wp-block-quote { margin: 48px 0 !important; padding: 0 0 0 28px; border-left: 3px solid var(--wp--preset--color--primary); }
:root body .ha-artikel .wp-block-quote p { margin: 0; color: var(--wp--preset--color--secondary); font-family: var(--wp--preset--font-family--body); font-size: 30px; font-weight: 400; line-height: 1.35; }
:root body .ha-artikel .wp-block-quote cite { display: block; margin-top: 12px; font-size: 15px; font-style: normal; opacity: .75; }
@media (max-width: 767px) { :root body .ha-artikel .wp-block-quote p { font-size: 24px; } }

/* === Enskilt case som ram (Mika 2026-10-14) ===
   Toppen är fast i mallen: "← Tillbaka" + taggen (#kundcase/#hattenav),
   kundens namn i jättefont, utdraget som ingress och omslagsbilden. Under
   den kommer innehållet som vanliga sektioner (mönstren "Case: …").
   Färgerna följer taggens profil (hattenav_case_profil i functions.php). */
:root body .ha-case-start.ha-tjanst-hero { min-height: 0; padding: 72px 24px 64px; }
:root body .ha-case-start .ha-sektion__inner { gap: 28px; }
:root body .ha-case-topp { width: 100%; gap: 8px 24px; }
:root body .ha-case-topp > * { margin: 0 !important; }
:root body .ha-case-tagg a { color: var(--wp--preset--color--secondary); text-decoration: none; text-transform: none; letter-spacing: .05em; }
:root body .ha-case-tagg a:hover { text-decoration: underline; }
:root body .ha-case-namn { hyphens: manual; }
:root body .ha-case-start .ha-case-ingress p { margin: 0; max-width: 783px; }
:root body .ha-case > .ha-case-bild { margin: 0 auto 32px !important; }
:root body .ha-case-innehall > .ha-sektion:first-child { margin-top: 64px; }

/* Faktaruta */
:root body .ha-fakta { margin-top: 0; gap: 32px 24px; }
:root body .ha-fakta__rad > * { margin: 0; }
:root body .ha-fakta__rad .ha-kicker { margin-bottom: 6px !important; font-size: 13px; }
:root body .ha-fakta__rad p:not(.ha-kicker) { font-size: 18px; line-height: 1.5; overflow-wrap: break-word; }
:root body .ha-fakta__rad a { color: inherit; }

/* Uppdraget: två spalter */
:root body .ha-case-spalter { max-width: none; gap: 40px; }
:root body .ha-case-spalter h3 { margin: 0 0 12px; color: var(--wp--preset--color--primary); font-size: 24px; line-height: 1.4; }
:root body .ha-sektion--bla .ha-case-spalter h3 { color: inherit; }
:root body .ha-case-spalter p { margin: 0 0 12px; font-size: 18px; line-height: 1.6; }

/* Leveransen: bilder + länkar */
:root body .ha-case-leverans .ha-sektion__inner > p:not(.ha-kicker) { max-width: 783px; font-size: 18px; line-height: 1.6; }
:root body .ha-case-bilder { margin-top: 40px !important; gap: 16px !important; }
:root body .ha-case-bilder img { border-radius: 12px; }
:root body .ha-case-bilder figcaption { font-size: 14px; }
:root body .ha-case-lankar { margin-top: 32px !important; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
:root body .ha-case-lankar li { margin: 0; }
:root body .ha-case-lankar a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 38px;
  color: var(--wp--preset--color--primary);
  font-size: 15px;
  text-decoration: none;
}
:root body .ha-case-lankar a::after { content: " ↗"; }
:root body .ha-case-lankar a:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); }

/* Röster: flera korta citat i rutnät */
:root body .ha-case-roster { margin-top: 40px; }
:root body .ha-case-roster .wp-block-quote { margin: 0; padding: 24px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .6); }
:root body .ha-case-roster .wp-block-quote p { margin: 0 0 12px; font-family: var(--wp--preset--font-family--body); font-size: 20px; line-height: 1.35; color: var(--wp--preset--color--primary); font-weight: 400;}
:root body .ha-case-roster .wp-block-quote cite { font-size: 13px; font-style: normal; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 767px) {
  :root body .ha-case-start.ha-tjanst-hero { padding: 48px 24px 40px; }
  :root body .ha-case-bilder { gap: 8px !important; }
}
:root body .ha-case-start .ha-case-ingress p.wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--ingress);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.03em;
}
/* Galleriet: sista raden sträcks inte ut (alla bilder lika stora). */
:root body .ha-case-bilder.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { flex-grow: 0; }
/* Karusell (klassen ha-case-karusell på galleriet): en rad som scrollar i sidled,
   för t.ex. Linkedin-karuseller. */
:root body .ha-case-karusell.wp-block-gallery.has-nested-images {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
:root body .ha-case-karusell.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  flex: 0 0 min(340px, 78vw);
  width: min(340px, 78vw);
  scroll-snap-align: start;
}
@media (max-width: 479px) {
  :root body .ha-fakta { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  :root body .ha-fakta__rad p:not(.ha-kicker) { font-size: 16px; }
  :root body .ha-case-topp .ha-kicker { font-size: 13px; }
}
:root body .ha-case-topp p.ha-case-tillbaka { font-size: 15px; }
@media (max-width: 479px) { :root body .ha-case-topp p.ha-case-tillbaka { font-size: 13px; } }
/* Case: rubrikerna i Saol (Mika 2026-10-14: "lite mycket Tan Misfits").
   TAN kvar: jättenamnet (kundens namn), avslutet och siffrorna. */
:root body .ha-case .ha-sektion:not(.ha-avslut) .ha-display,
:root body .ha-case .ha-fler-case > .wp-block-heading {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -.03em;
  line-height: 1.1;
}
:root body .ha-case .ha-steg h3,
:root body .ha-case .ha-casekort > .wp-block-post-title {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.01em;
  text-transform: none;
}

/* === Artiklar bakom lösenord (Mika 2026-10-14) ===
   Listan /artiklar/ (sidan Artiklar, korten som casekorten) och lösenordsrutan
   som WordPress visar i stället för sidans/artikelns innehåll (tillägget, artiklar.php). */
:root body .ha-artikellista { padding-top: 0; }
:root body .ha-losenord-sektion { padding: 64px 24px 96px; }
:root body .ha-losenord-sektion > .ha-sektion__inner { max-width: 1140px; margin: 0 auto; }
:root body .ha-losenord-sektion .ha-jattenamn { margin: 0 0 32px; }
:root body .ha-artikel .ha-losenord, :root body .ha-losenord { max-width: 520px; }
:root body .ha-losenord p { margin: 0 0 16px; font-size: 18px !important; }
:root body .ha-losenord__fel { color: var(--wp--preset--color--primary); font-weight: 500; }
:root body .ha-losenord__rad { display: flex; flex-wrap: wrap; gap: 12px; }
:root body .ha-losenord input[type="password"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 20px;
  border: 1px solid currentColor;
  border-radius: 38px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}
:root body .ha-losenord button {
  padding: 12px 28px;
  border: 0;
  border-radius: 38px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
/* Brödtextens bilder och listor i artiklarna. */
:root body .ha-artikel .wp-block-image img { border-radius: 12px; height: auto; }
:root body .ha-artikel .wp-block-image figcaption { margin-top: 10px; font-size: 15px; text-align: center; opacity: .75; }
:root body .ha-artikel li { font-size: 20px; line-height: 1.6; margin-bottom: 8px; }
:root body .ha-artikel h3 { margin-top: 40px !important; font-size: 26px; line-height: 1.2; }
:root body .ha-artikel .wp-block-separator { margin: 48px 0 !important; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
@media (max-width: 767px) { :root body .ha-artikel li { font-size: 18px; } }
/* Artiklarnas mellanrubriker och artikelkortens titlar i Saol, som på case-sidan
   (långa rubriker, "lite mycket Tan Misfits"). TAN kvar: jättenamnet Artiklar. */
:root body .ha-artikelsida .ha-artikel h2,
:root body .ha-artikelsida .ha-artikel h3 {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-transform: none;
}
:root body .ha-artikelkort > .wp-block-post-title {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.01em;
  text-transform: none;
  hyphens: manual;
}

/* === Artikelsidan, tätare (Mika 2026-10-14: "lite för tomt … fonten och bilderna lite för stora") ===
   Mindre luft i toppen, rubrik max 56px, omslaget max 960px med rundade hörn, brödtext 18px,
   bilder i texten max 600px. På stora skärmar: innehållsförteckning till vänster (följer med).
   Gäller bara artiklarna (.ha-artikelsida), inte /manifest/. */
:root body .ha-artikelsida .ha-artikel-hero { padding: 56px 24px 40px; }
:root body .ha-artikelsida .ha-artikel-hero > .ha-sektion__inner { max-width: 1040px; }
:root body .ha-artikelsida .ha-artikel__rubrik { margin-top: 16px !important; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; }
:root body .ha-artikelsida .ha-artikel__ingress { max-width: 760px; margin-top: 20px !important; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; }
:root body .ha-artikel__meta { gap: 16px; align-items: center; }
:root body .ha-artikel__meta > * { margin: 0 !important; }
:root body .ha-artikel__lastid { opacity: .7; white-space: nowrap; }
:root body .ha-artikel__omslag { max-width: 1040px; margin: 0 auto !important; padding: 0 24px; box-sizing: content-box; }
:root body .ha-artikel__omslag img { border-radius: 16px; }
:root body .ha-artikelsida .ha-artikel { padding: 48px 24px 72px; }
:root body .ha-artikelsida .ha-artikel p,
:root body .ha-artikelsida .ha-artikel li { font-size: 18px; line-height: 1.65; }
:root body .ha-artikelsida .ha-artikel h2 { margin-top: 44px !important; margin-bottom: 14px !important; font-size: 30px; }
:root body .ha-artikelsida .ha-artikel h3 { margin-top: 32px !important; font-size: 23px; }
:root body .ha-artikelsida .ha-artikel .ha-sektion__inner > * { margin-bottom: 20px; }
:root body .ha-artikelsida .ha-artikel .wp-block-image { max-width: 600px; margin-left: auto !important; margin-right: auto !important; }
:root body .ha-artikelsida .ha-artikel .wp-block-quote p { font-size: 24px; }
:root body .ha-artikelsida .ha-artikel .wp-block-separator { margin: 36px 0 !important; }
:root body .ha-artikel__rutnat { width: 100%; max-width: 720px; margin: 0 auto; }
:root body .ha-artikel__rutnat > .ha-sektion__inner { max-width: 720px; margin: 0; }
:root body .ha-artikel__innehall { display: none; }
@media (min-width: 1100px) {
  :root body .ha-artikel__rutnat { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 72px; max-width: 1032px; }
  :root body .ha-artikel__rutnat > .ha-sektion__inner { grid-column: 2; }
  :root body .ha-artikel__innehall {
    display: block;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: calc(100px + var(--wp-admin--admin-bar--height, 0px));
    margin: 4px 0 0 !important;
    padding-top: 16px;
    border-top: 2px solid var(--wp--preset--color--primary);
  }
  /* Utan förteckning (en rubrik eller färre) ligger texten i mitten. */
  :root body .ha-artikel__rutnat:not(:has(.ha-artikel__innehall)) { grid-template-columns: minmax(0, 720px); justify-content: center; }
  :root body .ha-artikel__rutnat:not(:has(.ha-artikel__innehall)) > .ha-sektion__inner { grid-column: 1; }
}
:root body .ha-artikel__innehall > * { margin: 0; }
:root body .ha-artikel__innehall-lista { margin: 14px 0 0 !important; padding: 0; list-style: none; counter-reset: rubrik; }
:root body .ha-artikel__innehall-lista li { margin: 0 0 10px; font-size: 15px !important; line-height: 1.35 !important; }
:root body .ha-artikel__innehall-lista a { color: inherit; text-decoration: none; opacity: .75; }
:root body .ha-artikel__innehall-lista a:hover { color: var(--wp--preset--color--primary); opacity: 1; }
@media (max-width: 767px) {
  :root body .ha-artikelsida .ha-artikel-hero { padding: 32px 16px 28px; }
  :root body .ha-artikel__omslag { padding: 0 16px; }
  :root body .ha-artikelsida .ha-artikel { padding: 32px 16px 56px; }
  :root body .ha-artikelsida .ha-artikel p, :root body .ha-artikelsida .ha-artikel li { font-size: 17px; }
  :root body .ha-artikelsida .ha-artikel h2 { font-size: 26px; }
  :root body .ha-artikelsida .ha-artikel .wp-block-quote p { font-size: 21px; }
}

/* Avslutet: Läs också + ett av de andra, slumpat vid varje besök (skriptet efter .ha-avslutsvalen). Utan JS det första. */
:root body .ha-avslutsvalen { margin: 0; }
:root body .ha-avslutsvalen:not(.ha-valt) > .ha-avslutsval ~ .ha-avslutsval,
:root body .ha-avslutsvalen.ha-valt > .ha-avslutsval:not(.ha-vald) { display: none; }
:root body .ha-artikelsida .ha-avslutsval { margin: 0 !important; }
:root body .ha-artikelsida .ha-avslutsval.ha-duo-sektion { margin-top: 0; }
/* Den andra tjänsten + Om oss: halvan för artikelns egen tjänst döljs (Hatten av-artiklar: Kundcase + Om oss). */
html.ha-profil-kundcase .ha-avslutsval--om-oss .ha-duo__del.ha-farg-kundcase,
html.ha-profil-nyhetsbrev .ha-avslutsval--om-oss .ha-duo__del.ha-farg-nyhetsbrev,
html.ha-profil-hattenav .ha-avslutsval--om-oss .ha-duo__del.ha-farg-nyhetsbrev { display: none; }
/* Bannern: den som hör till artikelns profil. */
:root body .ha-avslutsval--banner { padding: 0 24px 96px; }
:root body .ha-artikel-banner { display: none; padding: 56px; border-radius: 20px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); }
html.ha-profil-kundcase .ha-artikel-banner--kundcase,
html.ha-profil-nyhetsbrev .ha-artikel-banner--nyhetsbrev,
html.ha-profil-hattenav .ha-artikel-banner--hattenav { display: block; }
:root body .ha-artikel-banner > * { margin: 0; }
:root body .ha-artikel-banner .ha-kicker { color: inherit; opacity: .8; }
:root body .ha-artikel-banner__rubrik {
  max-width: 720px;
  margin-top: 12px !important;
  color: inherit;
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(28px, 3.6vw, 42px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-transform: none;
  text-wrap: balance;
}
:root body .ha-artikel-banner__text { max-width: 600px; margin-top: 16px !important; font-size: 18px; line-height: 1.55; }
:root body .ha-artikel-banner .wp-block-buttons { margin-top: 28px !important; }
:root body .ha-artikel-banner .wp-block-button__link { background: var(--wp--preset--color--background); color: var(--wp--preset--color--primary); }
@media (max-width: 767px) {
  :root body .ha-avslutsval--banner { padding: 0 16px 64px; }
  :root body .ha-artikel-banner { padding: 32px 24px; }
}
/* Läs också: tre kort med samma tagg. */
:root body .ha-avslutsval--las-ocksa { padding-top: 24px; gap: 40px; }
:root body .ha-las-ocksa__rubrik {
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--body);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  text-transform: none;
}

/* Listan /artiklar/, tätare. */
:root body .ha-artikellista-hero { padding: 56px 24px 24px; }
:root body .ha-artikellista-hero .ha-jattenamn { font-size: clamp(56px, 10vw, 120px); }
:root body .ha-artikellista-hero .ha-ingress { margin-top: 12px !important; font-size: clamp(20px, 2.2vw, 26px); }
:root body .ha-artikellista { padding: 24px 24px 96px; }
:root body .ha-artikellista .ha-case-query { max-width: 1040px; }
:root body .ha-artikelkort { padding: 20px 20px 24px; }
:root body .ha-artikelkort > .wp-block-post-title { margin: 10px 0 6px !important; font-size: 21px; line-height: 1.25; }
:root body .ha-artikelkort .ha-kort__text { font-size: 15px; }
:root body .ha-artikelkort .ha-casekort__knapp { margin-top: 20px !important; }
:root body .ha-artikellista-hero > .ha-sektion__inner { max-width: 1040px; }
:root body .ha-las-ocksa__rubrik { letter-spacing: -.01em; }
/* Avsnittet man läser är markerat i innehållsförteckningen (Mika 2026-10-14). */
:root body .ha-artikel__innehall-lista a { display: block; padding-left: 12px; border-left: 2px solid transparent; transition: color .2s, opacity .2s, border-color .2s; }
:root body .ha-artikel__innehall-lista a.ha-aktiv { border-left-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: 500; opacity: 1; }

/* Tydligt slut på artikeln (Mika 2026-10-14): avslutsrad efter texten, och avsluten är fullbreddsband. */
:root body .ha-artikelsida .ha-artikel .ha-artikel__slut {
  margin: 48px 0 0 !important;
  padding-top: 20px;
  border-top: 2px solid var(--wp--preset--color--primary);
  gap: 12px 24px;
  align-items: center;
}
:root body .ha-artikel__slut > *, :root body .ha-artikel__slut-info > * { margin: 0 !important; }
:root body .ha-artikel__slut-info { gap: 16px; align-items: center; }
:root body .ha-artikelsida .ha-artikel .ha-artikel__slut p { font-size: 15px; }
:root body .ha-artikel__datum { opacity: .7; }
:root body .ha-artikelsida .ha-artikel { padding-bottom: 96px; }
/* Bannern: hela bandet i profilens färg, kant till kant. */
:root body .ha-avslutsval--banner { padding: 104px 24px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); }
:root body .ha-artikel-banner { padding: 0; border-radius: 0; background: none; color: inherit; }
/* Läs också: eget band i en ljus ton av profilens färg. */
:root body .ha-avslutsval--las-ocksa { padding: 88px 24px 104px; background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--background)); }
@media (max-width: 767px) {
  :root body .ha-avslutsval--banner { padding: 64px 16px; }
  :root body .ha-avslutsval--las-ocksa { padding: 56px 16px 72px; }
}

/* Startsidans Om oss (Mika 2026-10-14): överraden länkar till /om-oss/, texten
   och manifestknappen till vänster, en ruta "Ditt team" till höger. */
:root body .ha-kicker a { color: inherit; text-decoration: none; }
:root body .ha-kicker a:hover, :root body .ha-kicker a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
:root body .ha-tvakolumn--omoss { grid-template-columns: 3fr 2fr; gap: 56px; margin-top: 40px !important; }
:root body .ha-tvakolumn--omoss > .ha-tvakolumn__del:first-child { display: flex; flex-direction: column; gap: 20px; }
:root body .ha-tvakolumn--omoss .ha-manifestlank { margin-top: 4px !important; }
:root body .ha-tvakolumn--omoss .ha-tjanstkort .wp-block-buttons { margin-top: 6px; }
@media (max-width: 899px) {
  :root body .ha-tvakolumn--omoss { grid-template-columns: 1fr; gap: 32px; margin-top: 28px !important; }
}

/* Manifestbandet på Om oss (Mika 2026-10-14: "en större puff till vårt manifest"). Blått band,
   manifestets första mening stort i Saol, vit knapp. Ingen orange text på blått. */
:root body .ha-manifestpuff { padding-top: 120px; padding-bottom: 128px; }
:root body .ha-manifestpuff .ha-sektion__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
:root body .ha-manifestpuff .ha-manifestpuff__citat { max-width: 980px; color: currentColor; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.12; text-wrap: balance; }
:root body .ha-manifestpuff .ha-lead { max-width: 620px; }
:root body .ha-manifestpuff .is-style-outline > .wp-block-button__link { margin-top: 8px; background: #fff; border-color: #fff; color: var(--wp--preset--color--secondary); }
:root body .ha-manifestpuff .is-style-outline > .wp-block-button__link:hover { background: transparent; border-color: #fff; color: #fff; }
@media (max-width: 767px) {
  :root body .ha-manifestpuff { padding-top: 72px; padding-bottom: 80px; }
  :root body .ha-manifestpuff .ha-sektion__inner { gap: 22px; }
}

/* Teamet i en rad med fyra (Mika 2026-10-14: "en rad med fyra, så blir det tightare"). Två och två på mindre skärmar. */
:root body .ha-rutnat.ha-team { grid-template-columns: repeat(4, 1fr); max-width: none; gap: 48px 28px; }
:root body .ha-team .ha-person__bild img { width: 140px; }
:root body .ha-team .ha-person > h3 { font-size: 32px; }
:root body .ha-team .ha-person > .ha-kicker { font-size: 13px; }
:root body .ha-team .ha-person__mejl { overflow-wrap: anywhere; }
:root body .ha-team .ha-person__kul { font-size: 17px; }
/* Fem i teamet (Staffan, Mika 2026-10-20): fem i en rad från 1100px, tre + två
   däremellan, två och två (sist en ensam) under 900px. */
:root body .ha-rutnat.ha-team:has(> .ha-person:nth-child(5)) { grid-template-columns: repeat(5, 1fr); gap: 48px 24px; }
:root body .ha-team:has(> .ha-person:nth-child(5)) .ha-person__bild img { width: 128px; }
:root body .ha-team:has(> .ha-person:nth-child(5)) .ha-person > h3 { font-size: 28px; }
:root body .ha-team:has(> .ha-person:nth-child(5)) .ha-person__kul { font-size: 16px; }
@media (max-width: 1099px) {
  :root body .ha-rutnat.ha-team:has(> .ha-person:nth-child(5)) { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
}
@media (max-width: 899px) {
  :root body .ha-rutnat.ha-team, :root body .ha-rutnat.ha-team:has(> .ha-person:nth-child(5)) { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
}
@media (max-width: 479px) {
  :root body .ha-team:has(> .ha-person:nth-child(5)) .ha-person__bild img { width: 112px; }
  :root body .ha-team:has(> .ha-person:nth-child(5)) .ha-person > h3 { font-size: 26px; }
}
@media (max-width: 479px) {
  :root body .ha-rutnat.ha-team { gap: 36px 16px; }
  :root body .ha-team .ha-person__bild img { width: 112px; }
  :root body .ha-team .ha-person > h3 { font-size: 26px; }
  :root body .ha-team .ha-person > .ha-kicker { font-size: 11px; letter-spacing: .14em; }
  :root body .ha-team .ha-person__mejl { font-size: 13px; }
  :root body .ha-team .ha-person__kul { font-size: 15px; }
}

/* Genomgången av Om oss (Mika 2026-10-14: "fixa allt"). */
/* Personkorten: raderna låsta över korten (subgrid), så mejl och kul-rad står i linje även när en titel går på två rader. */
@supports (grid-template-rows: subgrid) {
  :root body .ha-team .ha-person:has(> :nth-child(5):last-child) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  :root body .ha-team .ha-person > .ha-kicker { align-self: start; }
}
/* Manifestbandet: jämn rytm (överrad → citat → text → knapp), citatet får hela bredden. */
:root body .ha-manifestpuff .ha-kicker { margin-bottom: 0 !important; }
:root body .ha-manifestpuff .ha-lead { margin-top: -4px !important; }
:root body .ha-manifestpuff .ha-manifestpuff__citat { max-width: none; }
/* Kundcase/Nyhetsbrev: namnet räknas på halvans bredd minus luften på båda sidor, så "Nyhetsbrev" inte går ut i kanten. */
:root body .ha-duo__namn { font-size: clamp(36px, calc((50vw - 2 * clamp(24px, 6vw, 96px)) / 8.2), 96px); }
@media (max-width: 767px) {
  :root body .ha-duo__namn { font-size: clamp(36px, calc((100vw - 32px) / 8.2), 96px); }
}

/* ==========================================================================
   Webbsson (Mika 2026-10-19): webbdesign med AI-agenten Klas. Hatten avs blå
   rakt igenom, vit och svart text, orange VÄLDIGT sällan och aldrig på blått
   (bara i en vit ruta, klassen ha-pris). Det som skiljer sidan från de
   andra: rutor och paket är små vita webbläsarfönster (adressrad med tre
   prickar), jättenamnet och de stora rubrikerna är svarta på blått, och
   avslutet är svart. Svart text bara i stor storlek direkt på blått
   (kontrasten är 3:1), annars på vitt.
   ========================================================================== */
:root body .ha-farg-webbsson,
html.ha-profil-webbsson body .ha-farg-profil {
  --wp--preset--color--primary: #fff;
  --wp--preset--color--secondary: #1c1c21;
  --wp--preset--color--background: #007392;
  --wp--preset--color--foreground: #fff;
  --ha-yta: #005b74;
  --ha-yta-text: #fff;
  --ha-orange-text: #fff;
  --ha-falt: #005b74;
  --ha-knapp-text: #007392;
  background: #007392;
  color: #fff;
}
/* Mörkare blått för de blå sektionerna, vitt för de vita (svart text), svart avslut. */
:root body .ha-farg-webbsson .ha-sektion--vit,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion--vit {
  --wp--preset--color--primary: #1c1c21;
  --wp--preset--color--secondary: #007392;
  --wp--preset--color--background: #fff;
  --wp--preset--color--foreground: #1c1c21;
  --ha-falt: #fff;
  --ha-knapp-text: #fff;
  background: #fff;
  color: #1c1c21;
}
:root body .ha-farg-webbsson .ha-sektion--orange,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion--orange { background: #1c1c21; color: #fff; }
:root body .ha-farg-webbsson .ha-sektion--orange .is-style-outline > .wp-block-button__link,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion--orange .is-style-outline > .wp-block-button__link { background: #fff; border-color: #fff; color: #1c1c21; }
:root body .ha-farg-webbsson .ha-sektion--orange .is-style-outline > .wp-block-button__link:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion--orange .is-style-outline > .wp-block-button__link:hover { background: #007392; border-color: #007392; color: #fff; }
/* Kort vid hovring: mörkare blått, inte vitt (vit text på vitt försvann, Mika 2026-10-22). Vita sektioner som förut. */
:root body .ha-farg-webbsson .ha-tjanstkort:hover,
:root body .ha-farg-webbsson .ha-kort:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-tjanstkort:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-kort:hover { background: #005b74; }
:root body .ha-farg-webbsson .ha-sektion--vit .ha-tjanstkort:hover,
:root body .ha-farg-webbsson .ha-sektion--vit .ha-kort:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion--vit .ha-tjanstkort:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion--vit .ha-kort:hover { background: var(--wp--preset--color--background); }

/* Ingen svart text på blått (Mika 2026-10-19). Svart bara på vitt: rubrikerna i de
   vita sektionerna. Betonade ord på blått är vita, utan understrykning. */
:root body .ha-farg-webbsson .ha-jattenamn,
:root body .ha-farg-webbsson .ha-display,
:root body .ha-farg-webbsson .ha-underrubrik { color: #fff; }
:root body .ha-farg-webbsson .ha-sektion--vit .ha-display,
:root body .ha-farg-webbsson .ha-sektion--vit .ha-underrubrik { color: #1c1c21; }
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-ingress em,
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-lead em,
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-notis em { color: inherit; }
/* Små texter i vitt (svart under 24px syns för dåligt på blått). */
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-fordel strong,
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-storcitat cite,
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-siffra__tal { color: #fff; }

/* Knappar på blått: vita med blå text; hover svart. Kontur: vit ram. */
:root body .ha-farg-webbsson .ha-sektion .wp-block-button__link:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion .wp-block-button__link:hover { background: #1c1c21; border-color: #1c1c21; color: #fff; }
:root body .ha-farg-webbsson .ha-sektion--bla .wp-block-button__link { color: #005b74; }
:root body .ha-farg-webbsson .ha-sektion .is-style-outline > .wp-block-button__link:hover { background: #fff; border-color: #fff; color: #007392; }
:root body .ha-farg-webbsson .ha-sektion--vit .wp-block-button__link:hover { background: #007392; border-color: #007392; color: #fff; }

/* Ordrader: vitt och vit kontur. */
:root body .ha-farg-webbsson .ha-ordrader__ord.is-bla { color: transparent; -webkit-text-stroke: 2px #fff; }
:root body .ha-farg-webbsson .ha-ordrader__ord.is-orange { color: #fff; }

/* Webbläsarfönstren: rutor, paket och gruppen ha-fonster. Vit yta, svart text,
   en adressrad med tre prickar överst (::before). Står det ett stycke med
   klassen ha-fonster__adress först blir det adressen i raden. */
:root body .ha-farg-webbsson .ha-ruta,
:root body .ha-farg-webbsson .ha-paket,
:root body .ha-farg-webbsson .ha-paket:nth-child(2),
:root body .ha-fonster {
  position: relative;
  padding: 56px 24px 26px;
  border-radius: 10px;
  background: #fff;
  color: #1c1c21;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
  text-align: left;
}
:root body .ha-farg-webbsson .ha-ruta::before,
:root body .ha-farg-webbsson .ha-paket::before,
:root body .ha-fonster::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 32px;
  border-bottom: 1px solid #e3e6e8;
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle, #c9ced2 4px, transparent 4.5px) 14px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #c9ced2 4px, transparent 4.5px) 30px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #c9ced2 4px, transparent 4.5px) 46px 50% / 12px 12px no-repeat,
    #f3f5f6;
}
:root body .ha-sektion .ha-fonster > *,
:root body .ha-farg-webbsson .ha-ruta > *, :root body .ha-farg-webbsson .ha-paket > * { margin: 0; }
:root body .ha-fonster { display: flex; flex-direction: column; gap: 12px; }
:root body .ha-fonster > .ha-fonster__adress {
  position: absolute;
  top: 6px; left: 70px; right: 14px;
  height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  background: #fff;
  color: #6b7378;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root body .ha-farg-webbsson .ha-sektion .ha-ruta > h3,
:root body .ha-farg-webbsson .ha-paket > h3,
:root body .ha-sektion .ha-fonster h3 { color: #1c1c21; }
:root body .ha-farg-webbsson .ha-ruta > p,
:root body .ha-farg-webbsson .ha-paket p,
:root body .ha-fonster p { color: #1c1c21; }
:root body .ha-farg-webbsson .ha-paket { display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; }
:root body .ha-farg-webbsson .ha-paket__antal { font-size: 26px; line-height: 1.2; }
/* Text i två kolumner (Klas, Känner ni igen er?) med luft mellan styckena. */
:root body .ha-farg-webbsson .ha-tvakolumn__del { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
:root body .ha-farg-webbsson .ha-tvakolumn__del > .ha-kicker { margin-bottom: -4px !important; }
:root body .ha-farg-webbsson .ha-tvakolumn__del > .ha-bockar { margin: 8px 0 !important; }
:root body .ha-farg-webbsson .ha-tvakolumn__del > p:not([class]) { font-size: 18px; line-height: 1.6; }
:root body .ha-farg-webbsson .ha-paket__tid { opacity: .75; }
:root body .ha-farg-webbsson .ha-paket__text { font-size: 15.5px; line-height: 1.55; }
/* Det enda orange: priset i en vit ruta (Mika: orange VÄLDIGT sällan, aldrig på blått). */
:root body .ha-farg-webbsson .ha-pris,
:root body .ha-fonster .ha-pris { color: #fd6f34 !important; }
/* Den gamla sajten i toppen: ett fönster som ser trött ut. */
:root body .ha-fonster--gammal { max-width: 520px; transform: rotate(-1.5deg); }
:root body .ha-fonster--gammal p:not(.ha-fonster__adress) { font-family: "Times New Roman", Times, serif; font-size: 17px; line-height: 1.4; }
:root body .ha-fonster--gammal h3 { font-family: "Times New Roman", Times, serif !important; font-size: 26px !important; text-decoration: underline; color: #0000ee !important; }
:root body .ha-fonster--gammal .ha-fonster__fot { color: #8a8f93 !important; font-size: 13px !important; font-family: var(--wp--preset--font-family--body) !important; }

/* Sidhuvud och sidfot i Webbsson: blått sidhuvud med vit meny och vit knapp med
   blå text; mörkblå sidfot med vit text (avslutet ovanför är svart). */
html.ha-profil-webbsson .ha-site-header {
  --wp--preset--color--primary: #fff;
  --wp--preset--color--secondary: #fff;
  --wp--preset--color--background: #007392;
  --wp--preset--color--foreground: #fff;
}
html.ha-profil-webbsson .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content,
html.ha-profil-webbsson .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:visited,
html.ha-profil-webbsson .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:hover,
html.ha-profil-webbsson .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:focus-visible { color: #007392; }
html.ha-profil-webbsson .ha-site-footer {
  --wp--preset--color--secondary: #005b74;
  --wp--preset--color--background: #fff;
}

/* Kontakt i Webbsson: fälten mörkare blå med vit text, knappar vita med blå text. */
.ha-farg-webbsson .ha-kontakt__bokaknapp:hover, .ha-farg-webbsson .ha-kontakt__bokaknapp:focus-visible,
html.ha-profil-webbsson .ha-farg-profil .ha-kontakt__bokaknapp:hover,
html.ha-profil-webbsson .ha-farg-profil .ha-kontakt__bokaknapp:focus-visible { background: #1c1c21; color: #fff; }

/* Webbkollen (kontaktformuläret i Webbsson, tillägget kontakt.php): fler fält,
   frågor med val som knappar. Utan Webbsson är delen avstängd och dold. */
.ha-kontakt__webbkoll[disabled] { display: none; }
.ha-kontakt__webbkoll { display: contents; }
.ha-kontakt--webbkoll .ha-kontakt__boka { display: none; }
.ha-kontakt__fraga { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.ha-kontakt__fraga > legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ha-kontakt__val { display: flex; flex-wrap: wrap; gap: 8px; }
.ha-kontakt__val label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 999px;
  color: var(--wp--preset--color--primary);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ha-kontakt__val input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ha-kontakt__val label:has(input:checked) { background: var(--wp--preset--color--primary); color: var(--ha-knapp-text); }
.ha-kontakt__val label:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; }

/* Fönstrets innehåll: bockar och listor i svart på vitt. */
:root body .ha-fonster .ha-bockar { gap: 10px; margin: 4px 0 0 !important; }
:root body .ha-fonster .ha-bockar > li { color: #1c1c21; font-size: 19px; }
:root body .ha-fonster .ha-bockar > li::before { color: #007392; font-size: 16px; }
:root body .ha-fonster--klas { max-width: 460px; margin-left: auto !important; }
:root body .ha-tvakolumn:has(.ha-fonster) { align-items: center; }

/* Fyra i bredd (Webbssons process): 4 → 2 → 1. */
:root body .ha-rutnat--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { :root body .ha-rutnat--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { :root body .ha-rutnat--4 { grid-template-columns: 1fr; } }

/* Tjänster med fyra kvadratiska rutor (Mika 2026-10-19): 2 × 2 på stora skärmar,
   en i taget i mobilen. Hela rutan är klickbar som förut. */
:root body .ha-duo--fyra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root body .ha-duo-sektion--skarm .ha-duo--fyra .ha-duo__del { aspect-ratio: 1; min-height: 0; }
:root body .ha-duo-sektion--skarm .ha-duo--fyra .ha-duo__namn { font-size: clamp(36px, calc((50vw - 2 * clamp(24px, 6vw, 96px)) / 7.8), 120px); }
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-webbsson:hover { filter: brightness(1.08); }
@media (max-width: 767px) {
  :root body .ha-duo--fyra { grid-template-columns: 1fr; }
  :root body .ha-duo-sektion--skarm .ha-duo--fyra .ha-duo__del { aspect-ratio: auto; min-height: 75vw; }
}
:root body .ha-duo__del.ha-farg-webbsson .ha-duo__namn { color: #fff; }

/* ==========================================================================
   Brand Spirit Process (Mika 2026-10-19, förslag C): metoden som Hatten av
   kör tillsammans med Changing Minds. Bara befintliga färger i en ny
   kombination: röd platta (Kundcase-rött #94402e), gula rubriker och ordmärke
   (Kundcase-gult #f4bd5c), vit brödtext, gula knappar med svart text.
   De "blå" sektionerna är svarta (#1c1c21) med gula rubriker, de vita är vita
   med röda rubriker, avslutet är gult med svart text. Inget orange, inget blått.
   Kontrast: vitt på rött 6,9:1, gult på rött 4,1:1 (bara stor text), gult på
   svart 10:1. Svart text direkt på rött används inte (3:1).
   ========================================================================== */
:root body .ha-farg-brandspirit,
html.ha-profil-brandspirit body .ha-farg-profil {
  --wp--preset--color--primary: #f4bd5c;
  --wp--preset--color--secondary: #fff;
  --wp--preset--color--background: #94402e;
  --wp--preset--color--foreground: #fff;
  --ha-yta: #1c1c21;
  --ha-yta-text: #fff;
  --ha-orange-text: #1c1c21;
  --ha-falt: #1c1c21;
  --ha-knapp-text: #1c1c21;
  background: #94402e;
  color: #fff;
}
/* Vita sektioner: röda rubriker, svart text, röda knappar med vit text. */
:root body .ha-farg-brandspirit .ha-sektion--vit,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion--vit {
  --wp--preset--color--primary: #94402e;
  --wp--preset--color--secondary: #1c1c21;
  --wp--preset--color--background: #fff;
  --wp--preset--color--foreground: #1c1c21;
  --ha-falt: #fff;
  --ha-knapp-text: #fff;
  background: #fff;
  color: #1c1c21;
}
:root body .ha-farg-brandspirit .ha-sektion--vit .ha-ruta,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion--vit .ha-ruta { background: #94402e; color: #fff; }
:root body .ha-farg-brandspirit .ha-sektion--vit .ha-ruta > h3,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion--vit .ha-ruta > h3 { color: #f4bd5c; }

/* Rubriker gula, även i de svarta sektionerna. */
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .wp-block-heading,
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-kicker,
:root body .ha-farg-brandspirit .ha-sektion--bla .ha-steg__nr,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .wp-block-heading,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-kicker { color: #f4bd5c; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion) .ha-kicker { opacity: 1; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-lead,
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-fordel strong,
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-storcitat cite { color: #fff; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-ingress em,
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-lead em,
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion):not(.ha-sektion--orange) .ha-notis em { color: #f4bd5c; }
/* Rutor: röda på svart, svarta på rött. */
:root body .ha-farg-brandspirit .ha-sektion--bla .ha-ruta,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion--bla .ha-ruta { background: #94402e; color: #fff; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-sektion--bla):not(.ha-sektion--vit) .ha-ruta,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-sektion--bla):not(.ha-sektion--vit) .ha-ruta { background: #1c1c21; color: #fff; }

/* Knappar: gula med svart text; hover svart med gul text. Kontur: gul ram. */
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-duo-sektion) .wp-block-button__link,
:root body .ha-duo__del.ha-farg-brandspirit .wp-block-button__link,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-duo-sektion) .wp-block-button__link { background: #f4bd5c; border-color: #f4bd5c; color: #1c1c21; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-duo-sektion) .wp-block-button__link:hover,
:root body .ha-duo__del.ha-farg-brandspirit .wp-block-button__link:hover,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-duo-sektion) .wp-block-button__link:hover { background: #1c1c21; border-color: #1c1c21; color: #f4bd5c; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-duo-sektion) .is-style-outline > .wp-block-button__link,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-duo-sektion) .is-style-outline > .wp-block-button__link { background: transparent; border-color: #f4bd5c; color: #f4bd5c; }
:root body .ha-farg-brandspirit .ha-sektion:not(.ha-duo-sektion) .is-style-outline > .wp-block-button__link:hover,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion:not(.ha-duo-sektion) .is-style-outline > .wp-block-button__link:hover { background: #f4bd5c; border-color: #f4bd5c; color: #1c1c21; }
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--bla .wp-block-button__link:hover,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--bla .wp-block-button__link:hover { background: #94402e; border-color: #94402e; color: #fff; }
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--vit .wp-block-button__link,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--vit .wp-block-button__link { background: #94402e; border-color: #94402e; color: #fff; }
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--vit .wp-block-button__link:hover,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--vit .wp-block-button__link:hover { background: #1c1c21; border-color: #1c1c21; color: #fff; }

/* Avslutet: gult med svart text och en röd knapp med gul text. */
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--orange,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--orange { background: #f4bd5c; color: #1c1c21; }
/* Svart text på gult, inte vit (Mika 2026-10-21). */
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--orange :is(.wp-block-heading, .ha-lead, .ha-kicker, p),
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--orange :is(.wp-block-heading, .ha-lead, .ha-kicker, p) { color: #1c1c21; }
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--orange .wp-block-button__link,
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--orange .is-style-outline > .wp-block-button__link,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--orange .is-style-outline > .wp-block-button__link { background: #94402e; border-color: #94402e; color: #f4bd5c; }
:root body .ha-farg-brandspirit .ha-sektion.ha-sektion--orange .is-style-outline > .wp-block-button__link:hover,
html.ha-profil-brandspirit body .ha-farg-profil .ha-sektion.ha-sektion--orange .is-style-outline > .wp-block-button__link:hover { background: #1c1c21; border-color: #1c1c21; color: #f4bd5c; }

/* Jättenamnet: "brand spirit" (8,11 teckengrader) på en rad, "process" på nästa,
   i alla bredder (innehållet är högst 960px brett). */
:root body.page-template-tjanstesida-brandspirit .ha-jattenamn { font-size: clamp(32px, calc((min(100vw, 1008px) - 48px) / 8.4), 114px); }

/* Ordrader: gult och gul kontur. */
:root body .ha-farg-brandspirit .ha-ordrader__ord.is-bla { color: transparent; -webkit-text-stroke: 2px #f4bd5c; }
:root body .ha-farg-brandspirit .ha-ordrader__ord.is-orange { color: #f4bd5c; }

/* Bilderna: post-it-väggen i full bredd, grafiken (hjulet, Kompassen) på ett
   vitt kort, kundloggorna som vita rutor. */
:root body .ha-bs-helbild { padding: 0; }
:root body .ha-bs-helbild > * { margin: 0; width: 100%; }
:root body .ha-bs-helbild img { display: block; width: 100%; height: clamp(260px, 42vw, 620px); object-fit: cover; }
:root body .ha-bs-grafik { margin: 0; padding: clamp(16px, 3vw, 32px); border-radius: 11px; background: #fff; }
:root body .ha-bs-grafik img { display: block; width: 100%; height: auto; }
:root body .ha-tvakolumn:has(.ha-bs-grafik) { align-items: center; }
:root body .ha-bs-loggor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px !important; }
:root body .ha-bs-loggor > * { margin: 0; }
:root body .ha-bs-loggor img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 11px; background: #fff; }
@media (max-width: 767px) { :root body .ha-bs-loggor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
:root body .ha-bs-citat { margin-top: 48px !important; }
:root body .ha-bs-case { margin-top: 16px !important; }
:root body .ha-bs-case .ha-ruta { padding: 32px; }
:root body .ha-bs-case .ha-ruta > p:not(.ha-bs-citat__namn) { max-width: 720px; }
/* Ett vanligt stycke efter ingressen får luft och läsbar storlek. */
:root body .ha-farg-brandspirit .ha-sektion__inner > .ha-lead + p:not([class*="ha-"]) { max-width: 780px; margin-top: 24px; font-size: 18px; line-height: 1.6; }
:root body .ha-bs-citat .ha-ruta > p { font-size: 17px; line-height: 1.6; }
:root body .ha-bs-citat .ha-ruta > p.ha-bs-citat__namn { margin-top: auto; color: #f4bd5c; font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* Sidhuvud och sidfot i Brand Spirit Process: rött sidhuvud med gula loggor och gul
   meny, gul knapp med svart text; svart sidfot med vit text. */
html.ha-profil-brandspirit .ha-site-header {
  --wp--preset--color--primary: #f4bd5c;
  --wp--preset--color--secondary: #fff;
  --wp--preset--color--background: #94402e;
  --wp--preset--color--foreground: #fff;
}
html.ha-profil-brandspirit .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content,
html.ha-profil-brandspirit .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:visited,
html.ha-profil-brandspirit .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:hover,
html.ha-profil-brandspirit .ha-meny .ha-meny-knapp > .wp-block-navigation-item__content:focus-visible { color: #1c1c21; }
html.ha-profil-brandspirit .ha-site-footer {
  --wp--preset--color--secondary: #1c1c21;
  --wp--preset--color--background: #fff;
}

/* Kontakt i Brand Spirit Process: svarta fält med vit text, gul knapp med svart text. */
.ha-farg-brandspirit .ha-kontakt__bokaknapp:hover, .ha-farg-brandspirit .ha-kontakt__bokaknapp:focus-visible,
html.ha-profil-brandspirit .ha-farg-profil .ha-kontakt__bokaknapp:hover,
html.ha-profil-brandspirit .ha-farg-profil .ha-kontakt__bokaknapp:focus-visible { background: #1c1c21; color: #f4bd5c; }

/* Tjänster: Brand Spirit Process ruta. */
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-brandspirit:hover { filter: brightness(1.08); }
:root body .ha-duo__del.ha-farg-brandspirit .ha-duo__namn,
:root body .ha-duo__del.ha-farg-brandspirit .ha-kicker { color: #f4bd5c; }

/* Visa ett block bara i dator eller bara i mobil (2.37.0, Changing Minds-caset): skriv
   ha-bara-dator eller ha-bara-mobil som Ytterligare CSS-klass. Gränsen är 767px. I redigeraren
   syns båda, så att de går att ändra. */
@media (max-width: 767px) { :root body:not(.editor-styles-wrapper) .ha-bara-dator { display: none !important; } }
@media (min-width: 768px) { :root body:not(.editor-styles-wrapper) .ha-bara-mobil { display: none !important; } }

/* Case: film (videoblock med klassen ha-case-film) och före/efter (galleri med ha-case-fore-efter). */
:root body .ha-case-film { margin: 40px 0 0 !important; }
:root body .ha-case-film video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
:root body .ha-case-film.ha-bara-mobil video { width: auto; max-width: 100%; max-height: 80vh; margin: 0 auto; }
:root body .ha-case-fore-efter.wp-block-gallery.has-nested-images { flex-wrap: nowrap; }
:root body .ha-case-fore-efter.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc(50% - 8px); }
:root body .ha-case-fore-efter.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static; margin-top: 8px; padding: 0; background: none; color: inherit; text-align: left;
  font-size: 15px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
:root body .ha-case-fore-efter.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
:root body .ha-case-fore-efter.wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; }
:root body .ha-case-fore-efter img { box-shadow: 0 2px 16px rgba(0,0,0,.12); }
/* Bilderna fick höjden 0 i mobil (galleriets flex: 1 0 0% i en kolumnfigur), Mika 2026-10-22. */
:root body .ha-case-fore-efter.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { flex: none; height: auto; }

/* === Tjänster: knapparna inverteras vid hovring (Mika 2026-10-20) ===
   Knappens färg blir textfärgen, bakgrunden blir rutans och en linje i
   knappens färg går runt. Hela rutan är länken, så det händer när musen är
   var som helst i rutan. */
:root body .ha-duo-sektion--skarm .ha-duo__del .wp-block-button__link:hover {
  background: transparent; border-color: var(--ha-knapp); color: var(--ha-knapp); box-shadow: inset 0 0 0 1px var(--ha-knapp);
}
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-kundcase { --ha-knapp: #94402e; }
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-nyhetsbrev { --ha-knapp: #eeebe5; }
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-webbsson { --ha-knapp: #fff; }
:root body .ha-duo-sektion--skarm .ha-duo__del.ha-farg-brandspirit { --ha-knapp: #f4bd5c; }

/* Tjänstekorten på startsidan (Mika 2026-10-20): vita, med Kundcases röda
   respektive Webbssons blå i allt (rubrik, text, pilar, linjer, ram, knapp),
   i stället för persika/blå bakgrund. Vid hovring lyfts kortet (som förut)
   och knappen inverteras: vit med text och linje i kortets färg. */
:root body .ha-tjanstkort.ha-farg-kundcase { --ha-kortfarg: #94402e; }
:root body .ha-tjanstkort.ha-farg-webbsson { --ha-kortfarg: #007392; }
:root body .ha-tjanstkort.ha-farg-kundcase,
:root body .ha-tjanstkort.ha-farg-webbsson {
  --wp--preset--color--primary: var(--ha-kortfarg);
  --wp--preset--color--secondary: var(--ha-kortfarg);
  --wp--preset--color--foreground: var(--ha-kortfarg);
  background: #fff; color: var(--ha-kortfarg); outline: 1px solid var(--ha-kortfarg);
}
:root body .ha-tjanstkort.ha-farg-kundcase:hover,
:root body .ha-tjanstkort.ha-farg-webbsson:hover { background: #fff; }
:root body .ha-tjanstkort.ha-farg-kundcase > p,
:root body .ha-tjanstkort.ha-farg-webbsson > p,
:root body .ha-tjanstkort.ha-farg-kundcase > p.ha-erbjudande__vem,
:root body .ha-tjanstkort.ha-farg-webbsson > p.ha-erbjudande__vem,
:root body .ha-tjanstkort.ha-farg-kundcase li,
:root body .ha-tjanstkort.ha-farg-webbsson li { color: var(--ha-kortfarg); }
:root body .ha-tjanstkort.ha-farg-kundcase .wp-block-button__link,
:root body .ha-tjanstkort.ha-farg-webbsson .wp-block-button__link { background: var(--ha-kortfarg); border: 1px solid var(--ha-kortfarg); color: #fff; }
:root body .ha-tjanstkort.ha-farg-kundcase:hover .wp-block-button__link,
:root body .ha-tjanstkort.ha-farg-webbsson:hover .wp-block-button__link { background: #fff; color: var(--ha-kortfarg); box-shadow: inset 0 0 0 1px var(--ha-kortfarg); }

/* === Webbsson: färgkoll (Mika 2026-10-20) ===
   Aldrig svart och aldrig orange på blått. Bockarna, rubriken över casen och
   siffrorna blir vita; knapparna på blått inverteras vid hovring (genomskinliga
   med vit text och vit linje) i stället för att bli svarta; casetaggen är vit
   med blå text. Alla priser i paketen i Webbssons blå. */
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit) .ha-bockar > li::before,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion:not(.ha-sektion--vit) .ha-bockar > li::before { color: #fff; }
:root body .ha-farg-webbsson .ha-sektion .ha-fonster .ha-bockar > li::before,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion .ha-fonster .ha-bockar > li::before { color: #007392; }
:root body .ha-farg-webbsson .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
html.ha-profil-webbsson body .ha-farg-profil .ha-sektion:not(.ha-sektion--vit):not(.ha-duo-sektion) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background: transparent; border-color: #fff; color: #fff; box-shadow: inset 0 0 0 1px #fff;
}
:root body .ha-farg-webbsson .ha-paket .ha-paket__antal,
:root body .ha-farg-webbsson .ha-pris,
:root body .ha-fonster .ha-pris { color: #007392 !important; }
:root body .ha-farg-webbsson .ha-case-galleri .has-secondary-color,
html.ha-profil-webbsson body .ha-farg-profil .ha-case-galleri .has-secondary-color { color: #fff !important; }
:root body .ha-farg-webbsson .ha-siffra__tal,
html.ha-profil-webbsson body .ha-farg-profil .ha-siffra__tal { color: #fff; }
:root body .ha-casekort__tjanst a[href*="/webbsson/"] { background: #fff; color: #007392; outline: 1px solid #007392; outline-offset: -1px; }

/* Avsluten (halv-halv) på alla sidor utom Tjänster: Kundcase-halvan vit med Kundcases röda, i stället för
   persika bredvid Om oss orange (Mika 2026-10-20, alternativ a). Knappen
   inverteras vid hovring. */
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-kundcase {
  --wp--preset--color--primary: #94402e; --wp--preset--color--secondary: #94402e; --wp--preset--color--foreground: #94402e;
  background: #fff; color: #94402e;
}
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-kundcase .ha-kicker,
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-kundcase .ha-duo__namn,
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-kundcase .ha-duo__text { color: #94402e; }
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-kundcase .wp-block-button__link { background: #94402e; border-color: #94402e; color: #fff; }
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-kundcase .wp-block-button__link:hover { background: transparent; color: #94402e; box-shadow: inset 0 0 0 1px #94402e; }
:root body .ha-duo-sektion:not(.ha-duo-sektion--skarm) .ha-duo__del.ha-farg-hattenav .wp-block-button__link:hover { background: transparent; border-color: #fd6f34; color: #fd6f34; box-shadow: inset 0 0 0 1px #fd6f34; }

/* Tjänster i menyn har tjänsterna som undermeny: rullgardin vid hovring på
   datorn (i sidhuvudets färger), under Tjänster i den öppna mobilmenyn. */
.ha-meny .ha-meny-tjanster .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--primary); }
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .ha-meny-tjanster .wp-block-navigation__submenu-icon { display: none; }
.ha-meny .wp-block-navigation__responsive-container:not(.is-menu-open) .ha-meny-tjanster > .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--background) !important; color: var(--wp--preset--color--primary) !important;
  border: 1px solid var(--wp--preset--color--primary) !important; border-radius: 11px; padding: 8px 0 !important; min-width: 240px; top: calc(100% - 12px);
}
.ha-meny .wp-block-navigation__responsive-container:not(.is-menu-open) .ha-meny-tjanster > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 20px; text-transform: none; font-size: 16px; letter-spacing: 0;
}
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .ha-meny-tjanster > .wp-block-navigation__submenu-container {
  align-items: center; gap: 0; padding: 0 0 8px !important;
}
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .ha-meny-tjanster > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 18px; line-height: 28px; padding: 6px 20px; text-transform: none;
}
.ha-meny .wp-block-navigation__responsive-container:not(.is-menu-open) .ha-meny-hem { display: none; }
.ha-meny .wp-block-navigation__responsive-container.is-menu-open .ha-meny-tjanster { align-items: center; }

/* === Erbjudandet (Mika 2026-10-20, till 31 oktober) ===
   Kortet nere till vänster (functions.php, erbjudande.js) har alltid
   Kundcase-färgerna, oavsett profil: gult, röd rubrik och knapp, svart text.
   Rutan i Kundcase-formuläret (tillägget, kontakt.php) är gul med röd ram. */
.ha-erbj {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 90;
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  padding: 24px 24px 22px;
  background: #f4bd5c;
  color: #000;
  font-family: var(--wp--preset--font-family--body);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  animation: ha-erbj-in .45s cubic-bezier(.2, .8, .2, 1);
}
.ha-erbj[hidden] { display: none; }
@keyframes ha-erbj-in { from { transform: translateY(24px); opacity: 0; } }
.ha-erbj p { margin: 0; }
.ha-erbj__stang {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: #000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ha-erbj__stang:hover, .ha-erbj__stang:focus-visible { background: #000; color: #f4bd5c; }
.ha-erbj__etikett { margin-bottom: 8px !important; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ha-erbj__rubrik {
  margin: 0 40px 12px 0 !important;
  color: #94402e;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 28px;
  font-style: normal;
  line-height: 1.1;
  text-transform: lowercase;
}
.ha-erbj__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px !important; }
.ha-erbj__pris strong { font-size: 40px; font-weight: 500; line-height: 1; }
.ha-erbj__pris s { font-size: 17px; opacity: .7; }
.ha-erbj__pris span { font-size: 14px; white-space: nowrap; }
.ha-erbj__text { margin-bottom: 18px !important; font-size: 16px; line-height: 1.45; }
.ha-erbj__knapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 37px;
  background: #94402e;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .15s, color .15s;
}
.ha-erbj__knapp::after { content: "→"; font-size: 18px; line-height: 1; }
.ha-erbj__knapp:hover, .ha-erbj__knapp:focus-visible { background: #000; color: #f4bd5c; }
@media (max-width: 479px) {
  .ha-erbj { left: 16px; bottom: 16px; padding: 20px 18px 18px; }
  .ha-erbj__rubrik { font-size: 26px; }
  .ha-erbj__pris strong { font-size: 32px; }
}

.ha-kontakt__erbjudande {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 2px dashed #94402e;
  background: #f4bd5c;
  color: #000;
  cursor: pointer;
}
.ha-kontakt__erbjudande:has(input:checked) { border-style: solid; }
.ha-kontakt__erbjudande input { position: absolute; opacity: 0; pointer-events: none; }
.ha-kontakt__erbjudandebock {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  box-sizing: border-box;
  border: 2px solid #94402e;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: background-color .15s;
}
.ha-kontakt__erbjudande input:checked ~ .ha-kontakt__erbjudandebock { background: #94402e; }
.ha-kontakt__erbjudande input:checked ~ .ha-kontakt__erbjudandebock::before { content: "✓"; }
.ha-kontakt__erbjudande input:focus-visible ~ .ha-kontakt__erbjudandebock { outline: 2px solid #000; outline-offset: 2px; }
.ha-kontakt__erbjudandetext { display: block; font-size: 17px; font-weight: 500; line-height: 1.35; }
.ha-kontakt__moms { font-size: 14px; font-weight: 400; white-space: nowrap; }
.ha-kontakt__villkor { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; }

/* === Integritetspolicyn: bara Mabry, luft mellan avsnitten (Mika 2026-10-20 "mest ful") === */
:root body.privacy-policy .ha-sektion__inner { max-width: 720px; }
:root body.privacy-policy .ha-ingress {
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
  hyphens: manual;
}
:root body.privacy-policy .ha-lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; }
:root body.privacy-policy .ha-sektion--fortsatt h2 {
  margin: 56px 0 12px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--wp--preset--color--foreground);
}
:root body.privacy-policy .ha-sektion--fortsatt h2:first-child { margin-top: 0; }
:root body.privacy-policy .ha-sektion--fortsatt p,
:root body.privacy-policy .ha-sektion--fortsatt ul { margin: 0 0 14px; line-height: 1.65; }
:root body.privacy-policy .ha-sektion--fortsatt ul { padding-left: 1.2em; }
:root body.privacy-policy .ha-sektion--fortsatt li + li { margin-top: 6px; }

/* === Processteg i mobil: siffran till vänster, rubrik och text till höger (Mika 2026-10-20) === */
@media (max-width: 767px) {
  :root body .ha-stegen { gap: 32px; margin-top: 40px; }
  :root body .ha-steg { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-content: start; }
  :root body .ha-steg > * { grid-column: 2; }
  :root body .ha-steg > .ha-steg__nr { grid-column: 1; grid-row: 1 / span 9; margin: 0 !important; font-size: 56px; line-height: .9; }
}