/* HB Designsystem — ikoner och komponenter enligt byggspec 4a.
   Allt under .hb-*. Inga globala selektorer, ingen reset.
   Färgerna hämtas från Elementors globala variabler med hex som reserv. */

:root{
  --hb-natt:var(--e-global-color-hb_natt,#160C20);
  --hb-plommon:var(--e-global-color-hb_plommon,#2A1636);
  --hb-accent:var(--e-global-color-hb_accent,#F44973);
  --hb-glod:var(--e-global-color-hb_glod,#E854B1);
  --hb-tint:var(--e-global-color-hb_rosa_tint,#FFC9E4);
  /* All brödtext på sajten ska ha samma färg. Den bor i Elementors globala
     "Brödtext"-färg (Text), så den går att ändra på ett ställe i gränssnittet.
     Den gamla grå tonen #4A4A4A gjorde korten ljusare än löptexten bredvid. */
  --hb-brod:var(--e-global-color-text,#0A0A0A);
  --hb-etikett:var(--e-global-color-hb_etikett,#8C8C8C);
  --hb-linje:var(--e-global-color-hb_linje,#E4E8E7);
  --hb-papper:var(--e-global-color-hb_papper,#FFFFFF);
}

/* En Elementor-behållare som centrerar sina barn (align-items:center) krymper
   en widget till innehållets bredd. Våra sektioner har ingen egen bredd — de
   är fullbredd — så de kollapsade till noll och sidan blev vit. Sektionerna
   tar alltid hela bredden, oavsett hur behållaren är inställd. */
.hbo,.hbs{width:100%}
.elementor-widget-shortcode:has(.hbo),
.elementor-widget-shortcode:has(.hbs){width:100%;align-self:stretch}

/* Samma sak för banden när de är byggda som Elementor-behållare: står
   behållaren på align-items:center krymper varje barn till sin innehållsbredd,
   och ett band utan egen bredd blir en tom remsa. Banden sträcker alltid ut
   sina barn — bredden begränsas av max-width nedan, inte av flexlayouten. */
.hb-band.e-con,.hb-band > .e-con{--align-items:stretch;align-items:stretch}
.hb-band > .e-con,.hb-band > .elementor-widget{width:100%}

/* ===================== karusell utan javascript ===================== */

/* Logoraden är en Elementor-karusell som byggs av Swiper i webbläsaren.
   Kör inte skriptet — annonsblockerare, långsam uppkoppling, ett fel tidigare
   på sidan — ligger slidesen kvar som en ostylad hög på varandra. Reglerna
   nedan gäller bara så länge Swiper INTE hunnit initiera, och gör att raden
   åtminstone ser ut som en rad under tiden. */
.elementor-image-carousel-wrapper:not(.swiper-initialized){overflow:hidden}
.elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-wrapper{
  display:flex;align-items:center;gap:40px;flex-wrap:nowrap}
.elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide{
  flex:0 0 auto;max-width:180px}
.elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide img{
  max-height:70px;width:auto;object-fit:contain}

/* ============================ ikoner ============================ */

.hb-ikon{display:inline-block;flex:none;line-height:0;color:var(--hb-natt);width:52px;height:52px}
.hb-ikon svg{display:block;width:100%;height:100%}
.hb-ikon--s{width:40px;height:40px}
.hb-ikon--m{width:52px;height:52px}
.hb-ikon--l{width:64px;height:64px}
.hb-ikon--xl{width:76px;height:76px}

/* på mörkt band ärver mono-varianten vitt */
.hb-band--mork .hb-ikon,.hb-band--plommon .hb-ikon,.hb-mork .hb-ikon{color:var(--hb-papper)}

@media (max-width:599px){
  .hb-ikon--xl{width:60px;height:60px}
  .hb-ikon--l{width:56px;height:56px}
}

/* animerad: strecken ritas i tur och ordning när ikonen kommer in i bild */
.hb-ikon--anim .p{stroke-dasharray:1;stroke-dashoffset:1;
  animation:hb-rita .5s cubic-bezier(.65,0,.35,1) forwards}
.hb-ikon--anim .a{animation-duration:.38s}
.hb-ikon--anim .blob{transform-origin:36.5% 38.5%;transform:scale(.6);opacity:0;
  animation:hb-klick .42s cubic-bezier(.34,1.3,.64,1) forwards}
@keyframes hb-rita{to{stroke-dashoffset:0}}
@keyframes hb-klick{to{transform:scale(1);opacity:1}}
/* utan klassen står ikonen färdigritad — den blir aldrig osynlig */
.hb-ikon--anim:not(.is-synlig) .p{animation:none;stroke-dashoffset:0}
.hb-ikon--anim:not(.is-synlig) .blob{animation:none;transform:none;opacity:1}

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

.hb-band{padding:80px 40px}
.hb-band--ljus{background:var(--hb-papper);border-top:1px solid var(--hb-linje)}
.hb-band--mork{background:var(--hb-natt)}
.hb-band--plommon{background:var(--hb-plommon)}
.hb-band > *{max-width:1140px;margin-inline:auto}
.hb-band--mork,.hb-band--plommon{color:var(--hb-papper)}

/* ==================== etikett och rubrik ==================== */

/* Temat kör Barlow på rubriker och Hind på brödtext. Elementors
   typsnittsvariabel pekar på Hind för båda och saknar reservkedja, så den går
   inte att använda här — rubrikerna hämtar sitt typsnitt ur den egna token
   nedan i stället. Ändras temats rubriktypsnitt är det den raden som gäller. */
/* Endast Barlow 600 laddas lokalt. Rubriker satta i 700 fick en syntetisk
   fetstil som webbläsaren räknade fram ur 600-filen — den ser smetig ut och
   var en del av "fel typsnitt". Allt ligger på 600, samma vikt som temats
   egna rubriker. Vill vi ha 700 måste den vikten laddas först. */
:root{--hb-rubrikfont:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

.hb-etikett{display:block;
  font-family:var(--hb-rubrikfont);
  font-size:var(--e-global-typography-hb_etikett-font-size,11px);
  font-weight:var(--e-global-typography-hb_etikett-font-weight,600);
  letter-spacing:var(--e-global-typography-hb_etikett-letter-spacing,.16em);
  line-height:1;text-transform:uppercase;color:var(--hb-etikett);margin:0 0 14px}

.hb-rubrik{margin:0;
  font-family:var(--hb-rubrikfont);
  font-size:var(--e-global-typography-hb_sektion-font-size,32px);
  font-weight:600;
  letter-spacing:var(--e-global-typography-hb_sektion-letter-spacing,-.028em);
  line-height:var(--e-global-typography-hb_sektion-line-height,1.14em);
  color:var(--hb-natt)}
.hb-band--mork .hb-rubrik,.hb-band--plommon .hb-rubrik{color:var(--hb-papper)}

/* Elementor skriver inte ut egna klasser på behållare i den här
   installationen — bara på widgetar. Ett band som byggts som behållare kan
   därför inte färga sin text via bandklassen; widgeten får den här i stället. */
/* Widget som ligger kvar i mallen men inte ska visas — t.ex. formuläret som
   ersattes av hjälpguiden. Kvar för att kunna tas fram igen. */
.hb-dold-widget{display:none !important}

.hb-pa-mork,.hb-pa-mork *{color:var(--hb-papper)}
.hb-pa-mork-svag,.hb-pa-mork-svag *{color:rgba(255,255,255,.78)}

.hb-ingress{margin:18px 0 0;max-width:52ch;color:var(--hb-brod);
  font-size:var(--e-global-typography-hb_brod-font-size,17px);
  line-height:var(--e-global-typography-hb_brod-line-height,1.5em)}
.hb-band--mork .hb-ingress,.hb-band--plommon .hb-ingress{color:rgba(255,255,255,.78)}

/* ============================ knappar ============================ */

.hb-knapp{display:inline-block;font:inherit;cursor:pointer;text-decoration:none;
  font-size:var(--e-global-typography-hb_knapp-font-size,14.4px);
  font-weight:var(--e-global-typography-hb_knapp-font-weight,600);
  line-height:1;padding:13px 24px;border-radius:999px;
  border:1px solid transparent;background:var(--hb-accent);color:#fff;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.hb-knapp--sek{background:transparent;color:var(--hb-natt);border-color:var(--hb-linje)}
.hb-band--mork .hb-knapp--sek,.hb-band--plommon .hb-knapp--sek{color:#fff;border-color:rgba(255,255,255,.38)}

/* ============================ länk ============================ */

.hb-lank{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:15px;font-weight:600;color:var(--hb-accent);
  border-bottom:1px solid rgba(244,73,115,.35);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease}

/* ======================== rutnätskort ======================== */

/* Rutnätets linjer ritas av korten själva, inte av behållarens bakgrund.
   En ofylld sista rad blev annars en grå tomrektangel. */
.hb-rutnat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hb-papper);border:1px solid var(--hb-linje);
  border-radius:8px;overflow:hidden;margin-top:34px}
.hb-rutnat > .hb-kort{box-shadow:0 0 0 1px var(--hb-linje)}
.hb-rutnat--2{grid-template-columns:repeat(2,1fr)}
.hb-rutnat--6{grid-template-columns:repeat(6,1fr)}
.hb-kort{background:var(--hb-papper);padding:26px;display:flex;flex-direction:column}
.hb-kort-rubrik{margin:16px 0 0;color:var(--hb-natt);font-family:var(--hb-rubrikfont);
  font-size:var(--e-global-typography-hb_kort_l-font-size,20px);
  font-weight:600;letter-spacing:-.02em;line-height:1.18}
.hb-kort--liten .hb-kort-rubrik{font-size:var(--e-global-typography-hb_kort_s-font-size,17px);line-height:1.2}
.hb-kort-text{margin:8px 0 0;color:var(--hb-brod);font-size:16px;line-height:1.5}
.hb-kort-text:last-child{margin-bottom:0}
.hb-kort .hb-lank{margin-top:auto;padding-top:15px;align-self:flex-start}

@media (max-width:1219px){ .hb-rutnat--6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:899px){ .hb-rutnat{grid-template-columns:repeat(2,1fr)} }
@media (max-width:599px){
  .hb-rutnat,.hb-rutnat--2,.hb-rutnat--6{grid-template-columns:1fr}
  .hb-band{padding:56px 24px}
  .hb-knapp{padding:15px 24px}
}

/* ==================== statistik och citat ==================== */

.hb-siffra{display:block;color:var(--hb-papper);
  font-size:var(--e-global-typography-hb_statistik-font-size,54px);
  font-weight:600;letter-spacing:-.03em;line-height:1}
.hb-citat{margin:0;color:var(--hb-natt);font-size:17px;line-height:1.5}
.hb-citat-namn{margin-top:auto;padding-top:18px;color:var(--hb-etikett);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* ==================== formulär mot mörk fond ==================== */

.hb-formkort{background:var(--hb-natt);border-radius:8px;padding:26px;
  box-shadow:0 30px 60px -28px rgba(12,6,20,.55)}
.hb-faltstack{display:grid;gap:1px;background:rgba(255,255,255,.1);
  border-radius:8px;overflow:hidden;margin-bottom:20px}
.hb-falt{background:var(--hb-plommon);padding:14px 16px;border:0;
  font:inherit;font-size:16px;line-height:1.4;color:#fff}
.hb-falt::placeholder{color:var(--hb-etikett)}

/* Elementors formulärwidget klädd i systemets fältstack: fälten sitter i
   samma 1 px-rutnät som korten, fast med genomskinlig vit linje. */
.hb-formkort .elementor-form-fields-wrapper{gap:0 !important}
.hb-formkort .elementor-field-group{padding:0 !important;margin:0 0 1px !important;width:100% !important}
.hb-formkort .elementor-field-group > label{position:absolute !important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hb-formkort .elementor-field-textual{background:var(--hb-plommon) !important;
  border:0 !important;border-radius:0 !important;padding:14px 16px !important;
  font-size:16px !important;line-height:1.4 !important;color:#fff !important;
  min-height:0 !important;box-shadow:none !important}
.hb-formkort .elementor-field-textual::placeholder{color:var(--hb-etikett) !important;opacity:1}
.hb-formkort textarea.elementor-field-textual{min-height:120px !important}
.hb-formkort .elementor-field-type-submit{margin-top:20px !important}
.hb-formkort .elementor-button{background:var(--hb-accent) !important;color:#fff !important;
  border-radius:999px !important;padding:13px 24px !important;
  font-size:var(--e-global-typography-hb_knapp-font-size,14.4px) !important;
  font-weight:600 !important;border:0 !important}
.hb-formkort .elementor-message{color:#fff}

@media (hover:hover) and (pointer:fine){
  .hb-formkort .elementor-button:hover{background:var(--hb-glod) !important}
}

/* ============================ fokus ============================ */

.hb-band :focus-visible,.hb-knapp:focus-visible,.hb-lank:focus-visible{
  outline:2px solid var(--hb-accent);outline-offset:2px}
.hb-band--mork :focus-visible,.hb-band--plommon :focus-visible{outline-color:#fff}

/* ===================== hovring, bara med mus ===================== */

@media (hover:hover) and (pointer:fine){
  .hb-knapp:hover{background:var(--hb-glod);border-color:var(--hb-glod);transform:translateY(-1px)}
  .hb-knapp--sek:hover{background:transparent;transform:none;border-color:var(--hb-etikett)}
  .hb-band--mork .hb-knapp--sek:hover,.hb-band--plommon .hb-knapp--sek:hover{border-color:#fff}
  .hb-lank:hover{color:var(--hb-glod);border-color:var(--hb-glod)}
  a.hb-kort-rubrik:hover{color:var(--hb-accent)}
}

@media (prefers-reduced-motion:reduce){
  .hb-ikon--anim .p,.hb-ikon--anim .blob{animation:none;stroke-dashoffset:0;transform:none;opacity:1}
  .hb-knapp{transition:none}
}

/* ==================== bevisbandet ==================== */

.hb-bevis-tal{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16)}
.hb-bevis-etikett{display:block;margin-top:10px;color:rgba(255,255,255,.62);
  font-size:15px;line-height:1.4}
/* Logotyperna i ett jämnt rutnät i stället för en radbrytande flexrad — de
   har olika proportioner och lade sig annars i en ojämn trappa. Höjden måste
   sättas med !important: Elementors egen img-regel ligger efter den här. */
/* ============ ikonkort: Elementors Icon Box med våra ikoner ============
   Elementor bäddar in uppladdade SVG:er inline och behåller klasserna, så
   samma streckritning fungerar här som i kortkoden. Ikonen står färdigritad
   och ritas om vid hover — ingen JS behövs, till skillnad från varianten som
   startar när den kommer in i bild. */
@keyframes hb-rita-om{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hb-klick-om{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.hb-ikonkort .elementor-icon-box-wrapper{display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;gap:0}
.hb-ikonkort .elementor-icon-box-icon{margin:0 0 14px}
.hb-ikonkort .elementor-icon{color:var(--hb-natt);font-size:0}
.hb-ikonkort .elementor-icon svg{display:block;width:52px;height:52px;
  transition:transform .35s cubic-bezier(.34,1.1,.64,1)}
.hb-ikonkort .elementor-icon .p{stroke-dasharray:1;stroke-dashoffset:0}

.hb-ikonkort .elementor-icon-box-title{margin:0}
.hb-ikonkort .elementor-icon-box-title,
.hb-ikonkort .elementor-icon-box-title a{color:var(--hb-natt);
  font-family:var(--hb-rubrikfont);
  font-size:var(--e-global-typography-hb_kort_s-font-size,17px);
  font-weight:600;letter-spacing:-.02em;line-height:1.2}
.hb-ikonkort .elementor-icon-box-description{margin:8px 0 0;color:var(--hb-brod);
  font-size:16px;line-height:1.5}

/* hela kortet är hovrytan, inte bara ikonen */
.hb-kort:hover .hb-ikonkort .elementor-icon svg,
.hb-ikonkort:hover .elementor-icon svg{transform:translateY(-4px)}
.hb-kort:hover .hb-ikonkort .elementor-icon .p,
.hb-ikonkort:hover .elementor-icon .p{animation:hb-rita-om .55s cubic-bezier(.65,0,.35,1) forwards}
.hb-kort:hover .hb-ikonkort .elementor-icon .a,
.hb-ikonkort:hover .elementor-icon .a{animation-duration:.42s}
.hb-kort:hover .hb-ikonkort .elementor-icon .blob,
.hb-ikonkort:hover .elementor-icon .blob{transform-origin:36.5% 38.5%;
  animation:hb-klick-om .48s cubic-bezier(.34,1.3,.64,1) forwards}

@media (prefers-reduced-motion:reduce){
  .hb-ikonkort .elementor-icon svg,
  .hb-ikonkort:hover .elementor-icon svg{transition:none;transform:none}
  .hb-ikonkort:hover .elementor-icon .p,
  .hb-ikonkort:hover .elementor-icon .blob{animation:none}
}

/* Manifestbandet på startsidan: ett stycke som ska läsas långsamt.
   Större än brödtext, smalare än bandet, och sista raden bär. */
.hb-manifest{max-width:760px;margin-inline:auto}
.hb-manifest p{margin:0 0 22px;color:var(--hb-natt);font-size:22px;line-height:1.55}
.hb-manifest p:last-child{margin-bottom:0}
.hb-manifest strong{font-weight:600}
@media (max-width:599px){ .hb-manifest p{font-size:18px} }

/* Vägvalen på kontaktsidan: tre korta rader, inte tre stycken prosa. */
.hb-kontakt-vagval{margin-top:34px;padding-top:26px;border-top:1px solid var(--hb-linje)}
.hb-kontakt-vagval p{margin:0 0 16px;color:var(--hb-brod);font-size:16px;line-height:1.6}
.hb-kontakt-vagval p:last-child{margin-bottom:0}
.hb-kontakt-vagval strong{color:var(--hb-natt);font-family:var(--hb-rubrikfont);font-weight:600}

/* Elementors omdömeswidget i citatbandet: samma form som resten av korten. */
.hb-omdome .elementor-testimonial-content{margin:0;color:var(--hb-natt);
  font-size:17px;line-height:1.5}
.hb-omdome .elementor-testimonial-meta{margin-top:18px;padding:0}
.hb-omdome .elementor-testimonial-meta-inner{justify-content:flex-start}
.hb-omdome .elementor-testimonial-name{color:var(--hb-etikett);font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--hb-rubrikfont)}
.hb-omdome .elementor-testimonial-job{margin-top:4px;color:var(--hb-etikett);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}

/* Elementors räknare i bevisbandet. Widgeten skriver rubriken före siffran;
   vår ordning är tvärtom, så etiketten flyttas ned med flexordning i stället
   för att bygga om markupen. */
.hb-raknare .elementor-counter{display:flex;flex-direction:column}
.hb-raknare .elementor-counter-number-wrapper{order:1;
  color:var(--hb-papper);font-size:var(--e-global-typography-hb_statistik-font-size,54px);
  font-weight:600;letter-spacing:-.03em;line-height:1;
  font-family:var(--hb-rubrikfont)}
.hb-raknare .elementor-counter-title{order:2;margin-top:10px;
  color:rgba(255,255,255,.62);font-size:15px;line-height:1.4;text-align:left}

/* Logotyperna som egna bildwidgetar på startsidan — samma behandling som i
   kortkodens rad, men placerade i Elementors rutnät. */
.hb-logo img{height:28px !important;width:auto !important;max-width:160px;
  object-fit:contain;filter:brightness(0) invert(1);opacity:.55}

.hb-logor{display:flex;flex-wrap:wrap;align-items:center;gap:30px 52px;padding-top:38px}
.hb-logor img{height:28px!important;width:auto!important;max-width:160px;
  object-fit:contain;filter:brightness(0) invert(1);opacity:.55}

@media (max-width:599px){
  .hb-bevis-tal{grid-template-columns:1fr;gap:26px}
  .hb-logor{gap:24px 32px}
  .hb-logor img{height:22px!important}
}

/* länken under ett rutnät, t.ex. "Allt inom integrationer" */
.hb-mer{margin:22px 0 0}
/* ikonen på ett litet kort tar mindre plats än på ett stort */
.hb-kort--liten .hb-ikon{width:44px;height:44px}
.hb-kort--liten .hb-ikon + .hb-kort-rubrik{margin-top:14px}

/* ==================== ortssidans band ==================== */

/* två kolumner: text till vänster, punktlista till höger */
/* Payoffen över inledningen: större än brödtext, mindre än en rubrik. */
.hb-ort-payoff{margin:0;max-width:52ch;font-family:var(--hb-rubrikfont);
  font-size:26px;line-height:1.35;font-weight:600;color:var(--hb-natt);
  letter-spacing:-.01em}
.hb-ort-payoff br{content:"";display:block;margin-top:2px}

/* Mellanrubriken inne i löptexten — mindre än bandrubriken ovanför. */
.hb-rubrik--mellan{margin:34px 0 12px;font-family:var(--hb-rubrikfont);
  font-size:24px;line-height:1.3;font-weight:600;color:var(--hb-natt)}

.hb-tvakol{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;margin-top:34px}
.hb-tvakol-text p{margin:0 0 18px;color:var(--hb-brod);
  font-size:var(--e-global-typography-hb_brod-font-size,17px);
  line-height:var(--e-global-typography-hb_brod-line-height,1.5em);max-width:52ch}
.hb-tvakol-text p:last-child{margin-bottom:0}

/* punktlistan som 1 px-stack, samma rutnät som korten */
.hb-stack{display:grid;gap:1px;background:var(--hb-linje);
  border:1px solid var(--hb-linje);border-radius:8px;overflow:hidden}
.hb-stack-rad{background:var(--hb-papper);padding:16px 20px;color:var(--hb-natt);
  font-size:16px;line-height:1.4;display:flex;align-items:center;gap:14px}
.hb-stack-rad .hb-ikon{flex:none;width:26px;height:26px;color:var(--hb-accent)}

/* ortens egen text på plommonbandet */
.hb-lokalt{margin-top:26px;max-width:60ch}
.hb-lokalt h2,.hb-lokalt h3{margin:0 0 16px;color:var(--hb-papper);
  font-size:var(--e-global-typography-hb_kort_l-font-size,20px);
  font-weight:600;letter-spacing:-.02em;line-height:1.2}
.hb-lokalt p{margin:0 0 18px;color:rgba(255,255,255,.78);font-size:17px;line-height:1.6}
.hb-lokalt li{color:rgba(255,255,255,.78);font-size:17px;line-height:1.6}
.hb-lokalt a{color:#fff}

/* vanliga frågor: rader avdelade med 1 px-linje */
.hb-faq{margin-top:30px;border-top:1px solid var(--hb-linje)}
.hb-faq-rad{border-bottom:1px solid var(--hb-linje);padding:20px 0}
.hb-faq-rad summary{cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:flex-start;gap:20px;margin:0}
.hb-faq-rad summary::-webkit-details-marker{display:none}
.hb-faq-rad summary::after{content:"–";color:var(--hb-accent);
  font-size:22px;line-height:1;flex:none}
.hb-faq-rad:not([open]) summary::after{content:"+"}
.hb-faq-rad .hb-kort-text{padding-top:12px;max-width:66ch}

/* tjänstesidans hero och långa textavsnitt */
/* Säljrubriken under H1:an: tydligt mindre än namnet, tydligt större än
   brödtexten — den ska läsas som en underrubrik, inte tävla med rubriken. */
.hb-underrubrik{margin:14px 0 0;max-width:34ch;font-family:var(--hb-rubrikfont);
  font-size:var(--e-global-typography-hb_sektion-font-size,26px);
  font-weight:600;letter-spacing:-.02em;line-height:1.22;color:var(--hb-natt)}
.hb-band--mork .hb-underrubrik,.hb-band--plommon .hb-underrubrik{color:rgba(255,255,255,.9)}
@media (max-width:599px){ .hb-underrubrik{font-size:21px} }

.hb-rubrik--xl{font-size:var(--e-global-typography-hb_hero-font-size,54px);
  letter-spacing:var(--e-global-typography-hb_hero-letter-spacing,-.03em);
  line-height:var(--e-global-typography-hb_hero-line-height,1.08em)}
/* ch räknas mot elementets EGEN teckenstorlek, inte rubrikens. 22ch på en
   behållare med 17 px brödtext blev 180 px bred — rubriken bröts efter varje
   ord. Bredden sätts i px, radlängden styrs på texten själv. */
.hb-tjanst-hero{max-width:660px}
.hb-tjanst-hero--bred{max-width:820px}
.hb-tjanst-hero .hb-ingress{max-width:52ch}
.hb-tjanst-hero .hb-knapp{margin-top:26px}
.hb-tjanst-hero em{font-style:normal;color:var(--hb-accent)}
.hb-langtext{max-width:66ch}
.hb-langtext .hb-rubrik{margin-bottom:20px}
.hb-langtext p{margin:0 0 18px;color:var(--hb-brod);font-size:16px;line-height:1.7}
.hb-langtext li{color:var(--hb-brod);font-size:16px;line-height:1.7}

/* Fälten bär egna rubriker mitt i texten. De kom ut omärkta och ärvde temats
   typsnitt och svarta färg — även på plommonbandet. Här får de sidans egna. */
.hb-langtext h2,.hb-langtext h3,.hb-langtext h4,.hb-langtext h5,.hb-langtext h6{
  margin:34px 0 14px;color:var(--hb-natt);font-family:var(--hb-rubrikfont);
  font-weight:600;letter-spacing:-.02em;line-height:1.2}
.hb-langtext h2{font-size:var(--e-global-typography-hb_rubrik-font-size,30px)}
.hb-langtext h3,.hb-langtext h4,.hb-langtext h5,.hb-langtext h6{font-size:21px}
.hb-langtext > :first-child{margin-top:0}

/* På mörkt och plommon ska hela textblocket vändas, inte bara vår egen rubrik. */
.hb-band--mork .hb-langtext h2,.hb-band--plommon .hb-langtext h2,
.hb-band--mork .hb-langtext h3,.hb-band--plommon .hb-langtext h3,
.hb-band--mork .hb-langtext h4,.hb-band--plommon .hb-langtext h4,
.hb-band--mork .hb-langtext h5,.hb-band--plommon .hb-langtext h5,
.hb-band--mork .hb-langtext h6,.hb-band--plommon .hb-langtext h6,
.hb-band--mork .hb-langtext strong,.hb-band--plommon .hb-langtext strong{color:var(--hb-papper)}
.hb-band--mork .hb-langtext p,.hb-band--plommon .hb-langtext p,
.hb-band--mork .hb-langtext li,.hb-band--plommon .hb-langtext li,
.hb-band--mork .hb-kort-text,.hb-band--plommon .hb-kort-text{color:rgba(255,255,255,.82)}
.hb-band--mork .hb-faq,.hb-band--plommon .hb-faq,
.hb-band--mork .hb-faq-rad,.hb-band--plommon .hb-faq-rad{border-color:rgba(255,255,255,.18)}
.hb-band--mork .hb-faq summary,.hb-band--plommon .hb-faq summary{color:var(--hb-papper)}

/* Ett textblock i ett band på 1140 px lämnade 600 px tomt till höger. Rubriken
   flyttar ut i egen spalt så bredden används — men bara när det finns en. */
/* Textavsnittet: rubriken överst i full bredd, texten under i läsbar spalt och
   områdets ikon som grafiskt block bredvid. Ikonen fyller ytan som annars stod
   tom till höger, och följer med när man skrollar. */
.hb-textavsnitt > .hb-rubrik{max-width:26ch;margin:0 0 30px}
.hb-textavsnitt-kropp{display:grid;gap:32px}
.hb-textavsnitt-grafik{padding-top:8px;border-top:2px solid var(--hb-accent);justify-self:start}
.hb-textavsnitt-grafik .hb-ikon{width:110px;height:110px}
.hb-band--mork .hb-textavsnitt-grafik,.hb-band--plommon .hb-textavsnitt-grafik{
  border-top-color:rgba(255,255,255,.3)}

/* Inledningen står bredvid ikonen, resten går i full bredd under den.
   I mobil ligger de tre i flödesordning: inledning, ikon, resten. */
@media (min-width:1000px){
  .hb-textavsnitt-kropp{grid-template-columns:minmax(0,1fr) 240px;
    column-gap:64px;row-gap:40px;align-items:start}
  .hb-langtext--inledning{grid-column:1;grid-row:1;max-width:none}
  .hb-textavsnitt-grafik{grid-column:2;grid-row:1;justify-self:stretch}
  .hb-textavsnitt-grafik .hb-ikon{width:170px;height:170px}
  .hb-langtext--resten{grid-column:1 / -1;grid-row:2;max-width:none}
}

/* Ikonen ritar om sig när man hovrar. Egna keyframes-namn, annars startar
   webbläsaren inte om en animation som redan spelat färdigt. */
.hb-textavsnitt-grafik .hb-ikon{transition:transform .35s cubic-bezier(.34,1.1,.64,1)}
.hb-textavsnitt-grafik:hover .hb-ikon{transform:translateY(-5px)}
.hb-textavsnitt-grafik:hover .p{animation:hb-rita-om .55s cubic-bezier(.65,0,.35,1) forwards}
.hb-textavsnitt-grafik:hover .a{animation-duration:.42s}
.hb-textavsnitt-grafik:hover .blob{transform-origin:36.5% 38.5%;
  animation:hb-klick-om .48s cubic-bezier(.34,1.3,.64,1) forwards}
@keyframes hb-rita-om{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hb-klick-om{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .hb-textavsnitt-grafik .hb-ikon,
  .hb-textavsnitt-grafik:hover .hb-ikon{transition:none;transform:none}
  .hb-textavsnitt-grafik:hover .p,.hb-textavsnitt-grafik:hover .blob{animation:none}
}

/* Mellanrubrikerna bryter av väggen: en hårfin linje ovanför varje. */
.hb-langtext h3{margin-top:40px;padding-top:24px;border-top:1px solid var(--hb-linje)}
.hb-langtext h3:first-child{margin-top:0;padding-top:0;border-top:0}
.hb-band--mork .hb-langtext h3,.hb-band--plommon .hb-langtext h3{
  border-top-color:rgba(255,255,255,.18)}

/* avslutande rad: rubrik till vänster, knapp till höger */
.hb-cta-rad{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:26px}
.hb-cta-rad .hb-ingress{margin-top:12px}

@media (max-width:899px){
  .hb-tvakol{grid-template-columns:1fr;gap:30px}
}

/* ankare för hopp inom sidan — marginalen håller rubriken fri från den
   klistrade menyn när man landar */
.hb-ankare{display:block;position:relative;top:-110px;height:0;visibility:hidden}

/* avsnittstopp: ikonen till vänster om rubriken */
.hb-avsnittstopp{display:flex;align-items:flex-start;gap:24px;margin-bottom:8px}
.hb-avsnittstopp .hb-etikett{margin-bottom:8px}
.hb-avsnittstopp .hb-ingress{margin-top:12px;max-width:56ch}
.hb-band--mork .hb-avsnittstopp .hb-ingress,
.hb-band--plommon .hb-avsnittstopp .hb-ingress{color:rgba(255,255,255,.78)}
@media (max-width:640px){
  .hb-avsnittstopp{flex-direction:column;gap:14px}
}

/* rad-kortet i frågebanken: rubrik till vänster, antal till höger */
.hb-kort--rad{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.hb-kort--rad .hb-kort-rubrik{margin:0;text-decoration:none}
.hb-kort-antal{margin:0;color:var(--hb-etikett)}