/* ==========================================================================
Consult Work – stilmall
Färger anges som "r, g, b" så de kan användas med rgb()/rgba().
Byt --primary-color för att ändra sajtens huvudfärg.
========================================================================== */
:root {
    --primary-color: 91, 42, 134;        /* #5b2a86 lila */
    --primary-dark-color: 62, 25, 96;    /* #3e1960 */
    --primary-light-color: 244, 239, 250;/* #f4effa */
    --accent-color: 233, 220, 247;       /* #e9dcf7 */
    --black-color: 17, 17, 17;
    --gray-dark-color: 58, 58, 58;
    --gray-color: 142, 142, 142;
    --gray-light-color: 246, 245, 248;
    --white-color: 255, 255, 255;

    --menu-height: 8rem;
    --menu-height-scrolled: 7rem;
    --section-width: 130rem;
    --section-padding: 10rem;
    --gutter: 5rem;
    --radius: 1.6rem;
    --base-size: 1.6rem;
    --shadow: 0 1.5rem 4rem rgba(var(--primary-dark-color), .12);
}

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

html {
    font-size: 62.5%;
    scroll-padding-top: var(--menu-height);
}

body {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: var(--base-size);
    font-weight: 400;
    color: rgb(var(--black-color));
    background: rgb(var(--white-color));
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* Gemensamt, suddigt bakgrundsmönster (trianglar och prickar) bakom hela sidan */
/* Mönstret ligger i body::after så att det hamnar ovanpå gardinen (se Gardineffekt) */
body::after {
    content: '';
    position: fixed;
    inset: -2rem;
    z-index: -1;
    background:
        url('/assets/images/graphics/bg-logo.svg') center / cover no-repeat,
        url('/assets/images/graphics/bg-skiss.svg') 0 0 / 56rem 56rem repeat;
    filter: blur(3px);
    opacity: .85;
    pointer-events: none;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: inherit; font-weight: 400; }

p {
    margin: 0;
    padding-bottom: .8em;
    font-size: var(--base-size);
    line-height: 1.8;
    color: rgb(var(--gray-dark-color));
}

a { color: inherit; }

ul { margin-top: 0; }
li { font-size: var(--base-size); line-height: 1.8; }

.visually-hidden, .hidden-field {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 1rem; top: -10rem;
    z-index: 100;
    padding: 1rem 2rem;
    background: rgb(var(--primary-color));
    color: #fff;
    border-radius: .6rem;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid rgba(var(--primary-color), .6); outline-offset: 3px; }

/* Scroll-animationer (styrs av main.js) */
.js [data-aos] {
    opacity: 0;
    transition: opacity .8s ease-in-out, transform .8s ease-in-out;
}
.js [data-aos="fade-up"] { transform: translateY(3rem); }
.js [data-aos="fade-in-zoom"] { transform: scale(.9); }
.js [data-aos].aos-animate { opacity: 1; transform: none; }

/* ==========================================================================
Typografi
========================================================================== */
.section-title {
    padding-bottom: 2rem;
    font-size: clamp(2.8rem, 3.6vw, 4.4rem);
    font-weight: 300;
    line-height: 1.25;
    color: rgb(var(--black-color));
}

.small-title {
    padding-bottom: 1rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgb(var(--black-color));
}

.text-label {
    display: inline-block;
    padding-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.4;
    color: rgb(var(--primary-color));
}

.text-bold { font-weight: 600; }
.text-small, .text-small p { font-size: 1.4rem; }
.text-center { text-align: center; }
.text-white, .text-white p { color: rgb(var(--white-color)) !important; }
.text-primary { color: rgb(var(--primary-color)); }

.ingress {
    font-size: 1.9rem;
    line-height: 1.7;
    color: rgb(var(--black-color));
}

.text-block { max-width: 80rem; }
.text-center .text-block, .text-block-center { margin-left: auto; margin-right: auto; }

/* Understreck under rubriker */
.border-bottom {
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 1.4rem;
}
.border-bottom::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 5rem; height: 3px;
    border-radius: 3px;
    background: rgb(var(--primary-color));
}
.text-white.border-bottom::after { background: rgb(var(--white-color)); }
.text-center .border-bottom::after { left: 50%; transform: translateX(-50%); }
.small-title.border-bottom i { margin-right: .6rem; color: rgb(var(--primary-color)); }
.section-title.border-bottom i { margin-right: 1rem; font-size: .85em; }

/* Listor */
.list-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2.4rem;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
}
.list-row li { font-size: 1.5rem; }

.list-arrow { padding: 0; margin: 0 0 2rem; list-style: none; }
.list-arrow li { position: relative; padding: .3rem 0 .3rem 2.8rem; color: rgb(var(--gray-dark-color)); }
.list-arrow li::before {
    content: '\f054';
    position: absolute;
    left: 0; top: .75rem;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.2rem;
    color: rgb(var(--primary-color));
}

/* ==========================================================================
Hjälpklasser
========================================================================== */
.bg-primary { background-color: rgb(var(--primary-color)); }
.bg-primary-light { background-color: rgba(var(--primary-light-color), .88); }
.bg-gray-light { background-color: rgb(var(--gray-light-color)); }

.br-1 { border-radius: var(--radius); }
.mb-2 { margin-bottom: 4rem; }
.p-2 { padding: 3rem !important; }
.pt-2 { padding-top: 2.5rem; }

.of-wrapper { position: relative; overflow: hidden; }
.of-wrapper img, .of-wrapper video { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Bildfokus: op-X-Y = object-position X% Y% */
.op-50-10 { object-position: 50% 10% !important; }
.op-50-20 { object-position: 50% 20% !important; }
.op-50-30 { object-position: 50% 30% !important; }
.op-50-50 { object-position: 50% 50% !important; }
.op-50-80 { object-position: 50% 80% !important; }

/* ==========================================================================
Knappar
========================================================================== */
.btn-wrapper { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.btn-wrapper.center { justify-content: center; }

.btn, .ContactSubmit {
    display: inline-block;
    padding: 1.4rem 3.2rem;
    border: 2px solid transparent;
    border-radius: 5rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.btn-primary-filled, .ContactSubmit {
    background: rgb(var(--primary-color));
    color: rgb(var(--white-color));
}
.btn-primary-filled:hover, .ContactSubmit:hover {
    background: rgb(var(--primary-dark-color));
    transform: translateY(-2px);
    box-shadow: 0 1rem 2rem rgba(var(--primary-color), .3);
}

.btn-white-filled {
    background: rgb(var(--white-color));
    color: rgb(var(--primary-color));
}
.btn-white-filled:hover { background: rgb(var(--accent-color)); transform: translateY(-2px); }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--white-color), .55); }
    70% { box-shadow: 0 0 0 1.6rem rgba(var(--white-color), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--white-color), 0); }
}

@keyframes pulse-primary {
    0% { box-shadow: 0 0 0 0 rgba(var(--primary-color), .5); }
    70% { box-shadow: 0 0 0 1.6rem rgba(var(--primary-color), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-color), 0); }
}

/* ==========================================================================
Header / navigation
========================================================================== */
header {
    z-index: 50;
    position: sticky;
    top: 0;
    width: 100%;
    padding: 0 var(--gutter);
    background: rgb(var(--white-color));
    transition: box-shadow .3s ease;
}
header.scrolled { box-shadow: 0 .4rem 2rem rgba(var(--black-color), .08); }

header .container {
    display: flex;
    align-items: center;
    max-width: var(--section-width);
    height: var(--menu-height);
    margin: 0 auto;
    transition: height .3s ease;
}
header.scrolled .container { height: var(--menu-height-scrolled); }

.header-logo { z-index: 60; margin-right: auto; }
.header-logo a { display: block; }
.header-logo img { width: auto; height: 5rem; transition: height .3s ease; }
header.scrolled .header-logo img { height: 4.4rem; }

.TemplateMenu {
    display: flex;
    gap: 3.4rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.TemplateMenu a {
    white-space: nowrap;
    position: relative;
    display: block;
    padding: .6rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .3s ease;
}
.TemplateMenu a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: rgb(var(--primary-color));
    transition: width .3s ease;
}
.TemplateMenu li.active > a, .TemplateMenu a:hover { color: rgb(var(--primary-color)); }
.TemplateMenu li.active > a::after, .TemplateMenu a:hover::after { width: 100%; }

/* Undermeny under "Interim & konsult" */
.TemplateMenu .has-sub { position: relative; display: flex; align-items: center; gap: .4rem; }
.sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; padding: 0; border: 0; background: none;
    color: inherit; font-size: 1.1rem; cursor: pointer; transition: transform .25s ease, color .25s ease;
}
.has-sub:hover > .sub-toggle, .has-sub:focus-within > .sub-toggle, .has-sub.active > .sub-toggle { color: rgb(var(--primary-color)); }
.has-sub:hover > .sub-toggle, .has-sub:focus-within > .sub-toggle { transform: rotate(180deg); }
.SubMenu {
    position: absolute; top: 100%; left: -2rem; z-index: 70;
    min-width: 28rem; margin: 0; padding: 1rem 0; list-style: none;
    background: rgb(var(--white-color)); border-radius: 1rem;
    box-shadow: 0 1.2rem 3.6rem rgba(40, 20, 70, .16);
    opacity: 0; visibility: hidden; transform: translateY(.8rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.SubMenu::before { content: ''; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem; }
.has-sub:hover > .SubMenu, .has-sub:focus-within > .SubMenu {
    opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease;
}
.TemplateMenu .SubMenu a { padding: .9rem 2.2rem; font-size: 1.45rem; font-weight: 400; color: rgb(var(--black-color)); }
.TemplateMenu .SubMenu a::after { display: none; }
.TemplateMenu .SubMenu a:hover, .TemplateMenu .SubMenu a[aria-current="page"] { color: rgb(var(--primary-color)); background: rgba(91, 42, 134, .06); }

.header-cta-wrapper { margin: 0 0 0 4rem; padding: 0; list-style: none; }
.header-cta-wrapper .btn { padding: 1.1rem 2.6rem; white-space: nowrap; }

/* Hamburgare */
.hamburger {
    z-index: 60;
    display: none;
    position: relative;
    width: 30px; height: 30px;
    margin-left: 2rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 30px; height: 2px;
    background: rgb(var(--black-color));
    transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.hamburger-inner { top: 6px; }
.hamburger-inner::before { top: 9px; }
.hamburger-inner::after { top: 18px; }
.hamburger.is-clicked .hamburger-inner { transform: translateY(9px) rotate(45deg); }
.hamburger.is-clicked .hamburger-inner::before { opacity: 0; }
.hamburger.is-clicked .hamburger-inner::after { transform: translateY(-18px) rotate(-90deg); }

@media (max-width: 1300px) {
    .TemplateMenu { gap: 2.4rem; }
    .header-cta-wrapper { margin-left: 2.4rem; }
}

@media (max-width: 1180px) {
    :root { --menu-height: 7rem; --menu-height-scrolled: 6.4rem; }
    .hamburger { display: block; }
    .header-logo img { height: 4.2rem; }
    header.scrolled .header-logo img { height: 3.8rem; }

    .mainmenu {
        position: fixed;
        inset: 0;
        z-index: 55;
        padding: calc(var(--menu-height) + 3rem) 3rem 3rem;
        background: rgb(var(--white-color));
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-1rem);
        transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
    }
    .menu-open .mainmenu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .3s ease, transform .3s ease;
    }
    .menu-open { overflow: hidden; }
    .TemplateMenu { flex-direction: column; gap: 0; }
    .TemplateMenu a { padding: 1.4rem 0; font-size: 2.2rem; border-bottom: 1px solid rgb(var(--gray-light-color)); }
    .TemplateMenu a::after { display: none; }
    .TemplateMenu .has-sub { flex-wrap: wrap; gap: 0; border-bottom: 1px solid rgb(var(--gray-light-color)); }
    .TemplateMenu .has-sub > a { flex: 1; border-bottom: 0; }
    .sub-toggle { width: 4.4rem; height: 4.4rem; font-size: 1.6rem; }
    .has-sub:hover > .sub-toggle, .has-sub:focus-within > .sub-toggle { transform: none; }
    .has-sub.sub-open > .sub-toggle { transform: rotate(180deg); }
    .SubMenu, .has-sub:hover > .SubMenu, .has-sub:focus-within > .SubMenu {
        position: static; display: none; width: 100%; min-width: 0; padding: 0 0 1rem 1.6rem;
        box-shadow: none; border-radius: 0; background: none; opacity: 1; visibility: visible; transform: none;
    }
    .has-sub.sub-open > .SubMenu { display: block; }
    .SubMenu::before { display: none; }
    .TemplateMenu .SubMenu a { padding: 1rem 0; font-size: 1.8rem; border-bottom: 0; background: none; }

}

@media (max-width: 580px) {
    .header-cta-wrapper { margin-left: 1.2rem; }
    .header-cta-wrapper .btn { padding: .9rem 1.6rem; font-size: 1.3rem; }
    .hamburger { margin-left: 1.4rem; }
}


/* Språkval: svensk och brittisk flagga i sidhuvudet */
.sprakval { z-index: 60; position: relative; display: flex; align-items: center; gap: .4rem; margin-left: 3rem; padding: .3rem; border-radius: 2rem; background: rgb(var(--gray-light-color)); }
.sprakval a { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; opacity: .5; filter: saturate(.6); transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.sprakval a:hover, .sprakval a:focus-visible { opacity: 1; filter: none; transform: scale(1.08); }
.sprakval a[aria-current] { opacity: 1; filter: none; box-shadow: 0 0 0 2px rgb(var(--white-color)), 0 0 0 4px rgb(var(--primary-color)); }
.sprakval .flagga { display: block; width: 2.2rem; height: 2.2rem; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sprakval svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1300px) { .sprakval { margin-left: 2rem; } }
@media (max-width: 580px) {
    .sprakval { margin-left: .8rem; gap: .2rem; padding: .2rem; }
    .sprakval a { width: 2.4rem; height: 2.4rem; }
    .sprakval .flagga { width: 1.9rem; height: 1.9rem; }
}
@media (max-width: 400px) {
    .header-logo img, header.scrolled .header-logo img { height: 3.4rem; }
    .header-cta-wrapper { margin-left: .8rem; }
    .header-cta-wrapper .btn { padding: .8rem 1.2rem; }
    .hamburger { margin-left: 1rem; }
}

/* ==========================================================================
Sektioner
========================================================================== */
.section-wrapper {
    position: relative;
    padding: var(--section-padding) var(--gutter);
    overflow: hidden;
}

.section-block-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    max-width: var(--section-width);
    margin: 0 auto;
}

.col-block { width: 100%; max-width: 100%; }
.layout-2 .col-0 { width: 50%; padding-right: 3rem; }
.layout-2 .col-1 { width: 50%; padding-left: 3rem; }

.mw-1000 .section-block-wrapper { max-width: 100rem; }

.section-border { border-bottom: 1px solid rgba(var(--primary-color), .12); }

/* Dekorativa trianglar i hörnen */
.bg-triangle-top::before,
.bg-triangle-bottom::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: 32rem; height: 32rem;
    background: rgba(var(--primary-color), .07);
    pointer-events: none;
}
.bg-triangle-top::before { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bg-triangle-bottom::after { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.card-item.bg-triangle-top::before { width: 12rem; height: 12rem; background: rgba(var(--primary-color), .09); }

/* ==========================================================================
Toppsektion på startsidan
========================================================================== */
.top-section {
    display: flex;
    align-items: center;
    min-height: min(calc(100vh - var(--menu-height)), 70rem);
    padding-top: 9rem;
    padding-bottom: 15rem;
    background: rgb(var(--primary-dark-color));
}
.top-section .section-block { width: 100%; }
.top-section .section-title {
    max-width: 100rem;
    margin: 0 auto;
    font-size: clamp(3.4rem, 5.4vw, 6.6rem);
    font-weight: 300;
}
.top-section .small-title { padding-bottom: 1rem; font-size: clamp(1.8rem, 2vw, 2.4rem); font-weight: 400; }

.top-section .bg-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--primary-dark-color), .72), rgba(var(--black-color), .25));
}

/* Säsongsvideo i heron (hero-video.js) */
.hero-video { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .8s ease; }
/* Tonen måste ligga i ett eget lager ovanför videon, annars kan grafikkortet
   rita videon överst (hårdvaruöverlägg) och den lila tonen försvinner */
.top-section.video-ready .bg-image-wrapper::after { z-index: 1; will-change: transform; transform: translateZ(0); }
.hero-video.playing { opacity: 1; }
/* Lila ton över videon + mörkare mitt bakom texten */
.top-section.video-ready .bg-image-wrapper::after {
    background:
        radial-gradient(ellipse 60% 45% at 50% 48%, rgba(12, 6, 36, .5) 0%, rgba(12, 6, 36, .2) 60%, rgba(12, 6, 36, 0) 100%),
        linear-gradient(180deg, rgba(var(--primary-dark-color), .58) 0%, rgba(var(--primary-dark-color), .42) 100%);
}
/* Sommarskogen är ljus: mörk, nästan neutral ton så att grönskan behålls */
.top-section.video-ready[data-season="sommar"] .bg-image-wrapper::after {
    background:
        radial-gradient(ellipse 60% 45% at 50% 48%, rgba(10, 8, 20, .55) 0%, rgba(10, 8, 20, .25) 60%, rgba(10, 8, 20, 0) 100%),
        linear-gradient(180deg, rgba(20, 12, 36, .5) 0%, rgba(20, 12, 36, .35) 100%);
}
/* Norrskenet är redan mörkt: bara en lätt ton så att det gröna syns */
.top-section.video-ready[data-season="vinter"] .bg-image-wrapper::after {
    background:
        radial-gradient(ellipse 60% 45% at 50% 48%, rgba(8, 6, 24, .4) 0%, rgba(8, 6, 24, .15) 60%, rgba(8, 6, 24, 0) 100%),
        linear-gradient(180deg, rgba(var(--primary-dark-color), .12) 0%, rgba(var(--primary-dark-color), .05) 100%);
}
.top-section.video-ready .section-title,
.top-section.video-ready .small-title { text-shadow: 0 2px 18px rgba(12, 6, 36, .75), 0 1px 3px rgba(12, 6, 36, .6); }
/* Ljus knapp i heron, så att den syns mot videon */
.top-section.video-ready .btn-primary-filled {
    background: rgb(var(--white-color));
    color: rgb(var(--primary-color));
}
.top-section.video-ready .btn-primary-filled:hover {
    background: rgb(var(--accent-color));
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Studsande pil med roterande text */
.bouncing-arrow-wrapper {
    position: absolute;
    left: 50%; bottom: 3rem;
    z-index: 3;
    width: 13rem; height: 13rem;
    transform: translateX(-50%);
}
.arrow-animate {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bouncing-arrow {
    position: absolute;
    left: 50%; top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem; height: 5.6rem;
    margin: -2.8rem 0 0 -2.8rem;
    border-radius: 50%;
    background: rgb(var(--white-color));
    color: rgb(var(--primary-color));
    font-size: 2rem;
    text-decoration: none;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-1rem); }
    60% { transform: translateY(-.5rem); }
}

/* ==========================================================================
Hero på undersidor
========================================================================== */
.hero {
    display: flex;
    align-items: center;
    min-height: 40rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
    background: rgb(var(--primary-dark-color));
}
.hero.bg-primary { min-height: 0; padding-top: 9rem; padding-bottom: 8rem; background: rgb(var(--primary-color)); }
.hero .section-block { width: 100%; }
.hero .section-title { font-size: clamp(3.4rem, 5vw, 6rem); }
.hero .text-block p { font-size: 1.8rem; }

.bg-image-wrapper { position: absolute !important; inset: 0; z-index: 0; }
.hero .bg-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--primary-dark-color), .92) 0%, rgba(var(--primary-dark-color), .7) 50%, rgba(var(--black-color), .35) 100%);
}
/* Bakgrundsbilden ska täcka hela sektionen, texten ligga ovanpå */
.hero .section-block-wrapper, .top-section .section-block-wrapper { position: static; }
.hero .text-wrapper, .hero h1, .hero .text-block, .hero .list-row,
.top-section .text-center { position: relative; z-index: 2; }

/* Stor genomskinlig text i bakgrunden */
.bg-text {
    position: absolute;
    right: -1rem; bottom: -3rem;
    z-index: 1;
    padding: 0;
    font-size: clamp(8rem, 17vw, 24rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: rgba(var(--white-color), .07) !important;
    pointer-events: none;
}
.bg-text.smaller { font-size: clamp(6rem, 11vw, 16rem); }

/* ==========================================================================
Delad sektion (text + bild)
========================================================================== */
.split-wrapper {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.split-wrapper.reverse { flex-direction: row-reverse; }
.split-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 7rem 6rem;
}

.split-image { width: 50%; min-height: 48rem; }
.split-wrapper:not(.bg-gray-light) .split-image { border-radius: var(--radius); }

/* ==========================================================================
Kort
========================================================================== */
.cards-wrapper {
    display: grid;
    gap: 3rem;
}
.cards-wrapper.w-33 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-wrapper.w-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-wrapper.w-100 { grid-template-columns: minmax(0, 1fr); }

.card-item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
}
a.card-item:hover { transform: translateY(-.6rem); box-shadow: var(--shadow); }
.card-item .card-body { position: relative; z-index: 1; flex: 1; }
.card-6-1 .card-body { padding: 3rem; }
.card-6-1 .image-wrapper { height: 24rem; }
.card-6-1 .card-item img { transition: transform .6s ease; }
.card-6-1 .card-item:hover img { transform: scale(1.05); }

/* Kort med ikon (startsidan) */

@keyframes morph {
    0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
    34% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

/* Tjänste-slider */
.scroll-slider { position: relative; }
.js-scroll-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 6rem) / 3);
    gap: 3rem;
    overflow-x: auto;
    scroll-snap-type: none;
    scrollbar-width: none;
    padding: 1rem .2rem 2rem;
}
.js-scroll-slider::-webkit-scrollbar { display: none; }
.js-scroll-slider .card-item { scroll-snap-align: start; }
.js-scroll-slider .card-item:hover { transform: translateY(-.4rem); }

/* ==========================================================================
Tidslinje "Hur vi jobbar"
========================================================================== */

/* ==========================================================================
Jobbannonser
========================================================================== */
/* overflow: hidden på sektionen skulle stoppa sticky-rutan */
.section-wrapper.section-career { overflow: visible; }
.section-career .col-0, .section-career .col-3 { display: none; }
.section-career .col-1 { width: 72%; padding-right: 4rem; }
.section-career .col-2 { width: 28%; }

/* Ansökningsrutan följer med när man scrollar */
.section-career .col-2 .col-wrapper {
    position: sticky;
    top: calc(var(--menu-height) + 3rem);
    padding: 3.5rem;
    border: 1px solid rgba(var(--primary-color), .12);
    border-radius: var(--radius);
    background: rgb(var(--primary-light-color));
    box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.section-career .col-2 .col-wrapper:hover {
    transform: translateY(-.5rem);
    border-color: rgba(var(--primary-color), .3);
    box-shadow: var(--shadow);
}
/* Annonstexten i en inramad ruta, som ansökningsrutan, så att den inte
   hamnar direkt på bakgrundsmönstret */
.section-career .col-1 .col-wrapper,
.policy-box {
    padding: 4.5rem;
    border: 1px solid rgba(var(--primary-color), .12);
    border-radius: var(--radius);
    background: rgb(var(--primary-light-color));
    box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .06);
}
.policy-box h2.small-title { padding-bottom: .4rem; }
.policy-box a { color: rgb(var(--primary-color)); }
.hero .list-row li { font-size: 1.6rem; }

/* Samtyckesruta i formulären */
.consent-field { display: flex; align-items: flex-start; gap: 1.2rem; margin: .4rem 0 1.6rem; }
.consent-field input { flex: none; width: 2rem; height: 2rem; margin: .3rem 0 0; accent-color: rgb(var(--primary-color)); }
.consent-field label { font-size: 1.45rem; line-height: 1.6; color: rgb(var(--gray-dark-color)); }
.consent-field a { color: rgb(var(--primary-color)); text-decoration: underline; }

.section-apply .section-title { padding-bottom: 4rem; }
.section-apply .ContactForm { max-width: 70rem; margin: 0 auto; }

.section-full {
    display: flex;
    align-items: center;
    min-height: 60vh;
}
.section-full .section-block { width: 100%; }

/* ==========================================================================
Formulär
========================================================================== */
.ContactForm > div { margin-bottom: 1.6rem; }

.ContactForm input[type="text"],
.ContactForm input[type="email"],
.ContactForm input[type="tel"],
.ContactForm textarea {
    width: 100%;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(var(--primary-color), .2);
    border-radius: 1rem;
    background: rgb(var(--white-color));
    font-family: inherit;
    font-size: var(--base-size);
    color: rgb(var(--black-color));
    transition: border-color .3s ease, box-shadow .3s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ContactForm textarea { min-height: 14rem; resize: vertical; }
.ContactForm input:focus, .ContactForm textarea:focus {
    outline: none;
    border-color: rgb(var(--primary-color));
    box-shadow: 0 0 0 4px rgba(var(--primary-color), .12);
}
.ContactForm input:user-invalid { border-color: #d33; background: #fff6f6; }

.ContactSubmit { width: 100%; font-size: 1.6rem; }

.file-dropzone {
    display: block;
    padding: 2.4rem;
    border: 2px dashed rgba(var(--primary-color), .35);
    border-radius: 1rem;
    background: rgb(var(--white-color));
    text-align: center;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease;
}
.file-dropzone:hover, .file-dropzone.drag-over { background: rgba(var(--primary-color), .05); border-color: rgb(var(--primary-color)); }
.file-dropzone.has-file { border-style: solid; border-color: rgb(var(--primary-color)); }
.file-dropzone i { font-size: 3.2rem; color: rgb(var(--primary-color)); }
.file-dropzone-text { display: block; margin-top: 1rem; font-size: 1.4rem; color: rgb(var(--gray-dark-color)); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-input:focus-visible + * , .file-field:focus-within .file-dropzone { outline: 3px solid rgba(var(--primary-color), .5); outline-offset: 2px; }

.ContactSentMessage {
    max-width: 60rem;
    margin: 0 auto 2.4rem;
    padding: 2rem 2.4rem;
    border-left: 4px solid rgb(var(--primary-color));
    border-radius: 1rem;
    background: rgb(var(--primary-light-color));
}
.ContactSentMessage p { padding: 0; }

/* Kontaktkort */
.section-8f8675db .card-item .card-body { padding: 2.4rem 3rem !important; }
.section-8f8675db .card-item p { padding: 0; font-size: 1.7rem; color: rgb(var(--black-color)); }
.section-8f8675db .card-item i { margin-right: 1rem; }

/* Diskret inloggningslänk på Karriär */

/* ==========================================================================
Sidfot
========================================================================== */
.footer {
    padding: 9rem var(--gutter) 3rem;
    background: rgb(28, 16, 44);
    color: rgba(var(--white-color), .75);
}
.footer-container { max-width: var(--section-width); margin: 0 auto; }
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 5rem;
    padding-bottom: 6rem;
}
.footer .text-label { color: rgb(var(--white-color)); }
.footer p { color: rgba(var(--white-color), .7); }
.footer-submenu { padding: 0; margin: 0; list-style: none; }
.footer-menu-large .footer-submenu { max-width: 46rem; }
.footer-submenu li { padding: .3rem 0; color: rgba(var(--white-color), .7); font-size: 1.5rem; }
.footer-submenu a { text-decoration: none; transition: color .3s ease; }
.footer-submenu a:hover { color: rgb(var(--white-color)); text-decoration: underline; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 3rem;
    border-top: 1px solid rgba(var(--white-color), .12);
}
.footer-bottom p { padding: 0; font-size: 1.4rem; }

/* ==========================================================================
Responsivt
========================================================================== */
@media (max-width: 1200px) {
    .cards-wrapper.w-33 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .js-scroll-slider { grid-auto-columns: calc((100% - 3rem) / 2); }
    .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
    :root { --section-padding: 7rem; --gutter: 2.4rem; }
    .layout-2 .col-0, .layout-2 .col-1 { width: 100%; padding: 0; }
    .layout-2 .col-1 { padding-top: 4rem; }
    .split-wrapper, .split-wrapper.reverse { flex-direction: column-reverse; }
    .split-content, .split-image { width: 100%; }
    .split-content { padding: 5rem 3rem; }

    .split-image { min-height: 32rem; }
    .section-career .col-1, .section-career .col-2 { width: 100%; padding-right: 0; }

    /* Mobil: kompakt ansökningsrad som ligger kvar längst ner på skärmen */
    .section-career .col-2 {
        position: sticky;
        bottom: 1.2rem;
        z-index: 20;
        padding-top: 3rem;
    }
    .section-career .col-2 .col-wrapper {
        position: static;
        padding: 1.4rem 1.4rem 1.4rem 2rem !important;
        background: rgb(var(--white-color));
        box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .22);
    }
    .section-career .col-2 .col-wrapper:hover { transform: none; }
    .section-career .col-2 .block-object { display: flex; align-items: center; gap: 1.2rem; }
    .section-career .col-2 .small-title { flex: 1; padding: 0; font-size: 1.7rem; }
    .section-career .col-2 .text-small { display: none; }
    .section-career .col-2 .btn-wrapper { margin: 0; }
    .section-career .col-2 .btn { padding: 1.1rem 2.2rem; white-space: nowrap; }

}

@media (max-width: 750px) {
    .cards-wrapper.w-33, .cards-wrapper.w-50 { grid-template-columns: minmax(0, 1fr); }
    .js-scroll-slider { grid-auto-columns: 88%; }
    .card-6-1 .image-wrapper { height: 20rem; }

    .footer-top { grid-template-columns: 1fr; gap: 3.5rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; }
    :root { --section-padding: 5.5rem; --gutter: 2rem; --radius: 1.2rem; }
    .top-section { min-height: 0; padding-top: 7rem; padding-bottom: 14rem; }
    .top-section .section-title { font-size: 3.2rem; }
    .top-section .small-title { font-size: 1.7rem; }
    .hero { min-height: 0; padding-top: 5.5rem; padding-bottom: 5.5rem; }
    .hero .section-title { font-size: 3rem; }
    .hero .text-block p { font-size: 1.6rem; }
    .hero .bg-image-wrapper::after { background: linear-gradient(180deg, rgba(var(--primary-dark-color), .88), rgba(var(--primary-dark-color), .72)); }
    .bg-text, .bg-text.smaller { font-size: 7rem; bottom: -1.2rem; }
    .bouncing-arrow-wrapper { width: 10rem; height: 10rem; bottom: 2rem; }
    .bouncing-arrow { width: 4.6rem; height: 4.6rem; margin: -2.3rem 0 0 -2.3rem; font-size: 1.7rem; }
    .section-title { font-size: 2.7rem; }
    .small-title { font-size: 1.8rem; }
    .mb-2 { margin-bottom: 3rem; }
    .p-2 { padding: 2.2rem !important; }
    .section-career .col-1 .col-wrapper, .policy-box { padding: 2.6rem 2.2rem; }
    .card-6-1 .card-body { padding: 2.2rem; }

    .cards-wrapper { gap: 2rem; }
    .split-content { padding: 3.5rem 2.2rem; }
    .split-image { min-height: 24rem; }
    .list-row { gap: .2rem 1.6rem; }
    .list-row li { font-size: 1.4rem; }
    .bg-triangle-top::before, .bg-triangle-bottom::after { width: 16rem; height: 16rem; }
    .btn, .ContactSubmit { padding: 1.3rem 2.6rem; }
    .footer { padding-top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
Testversion: tydligare struktur (roller, process, frågor) i Consult Works tema
========================================================================== */
.btn i { margin-right: .6rem; }
.btn-outline-white { border-color: rgba(var(--white-color), .85); color: rgb(var(--white-color)); background: transparent; }
.btn-outline-white:hover { background: rgba(var(--white-color), .14); transform: translateY(-2px); }
.btn-outline-primary { border-color: rgb(var(--primary-color)); color: rgb(var(--primary-color)); background: transparent; }
.btn-outline-primary:hover { background: rgb(var(--primary-color)); color: rgb(var(--white-color)); transform: translateY(-2px); }
.btn-wrapper .btn + .btn { margin-left: 1.2rem; }
.hero-ctas { flex-wrap: wrap; gap: 1.2rem; }
.hero-ctas .btn + .btn { margin-left: 0; }

/* Lugnare uttryck: ingen pulsande knapp och inga hörntrianglar */
.bg-triangle-top::before, .bg-triangle-bottom::after { display: none; }

.section-lead { max-width: 64rem; margin: 0 auto; color: rgb(var(--gray-dark-color)); }

/* Tjänster per roll */
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.role-card {
    display: flex; flex-direction: column;
    padding: 3.2rem;
    border: 1px solid rgba(var(--primary-color), .12);
    border-radius: var(--radius);
    background: rgba(var(--white-color), .92);
    box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .06);
    text-decoration: none; color: inherit;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.role-card:hover { transform: translateY(-.5rem); border-color: rgba(var(--primary-color), .35); box-shadow: var(--shadow); }
.role-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 5.2rem; height: 5.2rem; margin-bottom: 2rem;
    border-radius: 1.4rem;
    background: rgb(var(--primary-light-color)); color: rgb(var(--primary-color));
    font-size: 2.2rem;
}
.role-card .small-title { padding-bottom: 1rem; }
.role-card p { flex: 1; color: rgb(var(--gray-dark-color)); }
.role-more { margin-top: 1.2rem; color: rgb(var(--primary-color)); font-weight: 500; }
.role-more i { margin-left: .4rem; transition: transform .3s ease; }
.role-card:hover .role-more i { transform: translateX(.4rem); }

/* Vanliga frågor */
.faq-list { max-width: 86rem; margin: 0 auto; }
.faq-item {
    margin-bottom: 1.2rem;
    border: 1px solid rgba(var(--primary-color), .12);
    border-radius: var(--radius);
    background: rgba(var(--white-color), .92);
}
.faq-item summary {
    position: relative;
    padding: 2.2rem 6rem 2.2rem 2.8rem;
    font-weight: 500; font-size: 1.7rem;
    list-style: none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute; right: 2.6rem; top: 50%; transform: translateY(-50%);
    font-size: 2.6rem; font-weight: 300; color: rgb(var(--primary-color));
    transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 2.8rem 2.4rem; color: rgb(var(--gray-dark-color)); }

@media (max-width: 980px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 750px) {
    .role-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .role-card { padding: 2.4rem; }
    .faq-item summary { padding: 1.8rem 5rem 1.8rem 2rem; font-size: 1.6rem; }
    .faq-item p { padding: 0 2rem 2rem; }
}

/* Karriär: kategorietikett, filter och kontaktperson */
.job-tag {
    display: inline-block; margin-bottom: 1.2rem; padding: .4rem 1.2rem;
    border-radius: 5rem; background: rgba(var(--primary-color), .1);
    color: rgb(var(--primary-color)); font-size: 1.3rem; font-weight: 500;
}
.job-tag-light { background: rgba(var(--white-color), .18); color: rgb(var(--white-color)); }
.job-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.job-filter-btn {
    padding: 1rem 2.2rem; border: 1px solid rgba(var(--primary-color), .25); border-radius: 5rem;
    background: rgba(var(--white-color), .9); color: rgb(var(--primary-color));
    font-family: inherit; font-size: 1.45rem; font-weight: 500; cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.job-filter-btn:hover { border-color: rgb(var(--primary-color)); }
.job-filter-btn.is-active { background: rgb(var(--primary-color)); border-color: rgb(var(--primary-color)); color: rgb(var(--white-color)); }
.card-item[hidden] { display: none !important; }
.job-contact { margin-top: 1.4rem; }
.job-contact a { color: rgb(var(--primary-color)); }
#spontanansokan { scroll-margin-top: var(--menu-height); }

/* Ansökningssidan: länk tillbaka till annonsen */
.back-link { display: inline-block; margin-bottom: 2rem; color: rgba(var(--white-color), .85); text-decoration: none; font-size: 1.5rem; }
.back-link:hover { color: rgb(var(--white-color)); text-decoration: underline; }
.back-link i { margin-right: .6rem; }

/* ==========================================================================
Typografi – gemensam skala för hela sajten
   Brödtext 16 px · ingress 18 px · liten rubrik 20 px · sektionsrubrik ≤ 40 px
   Sidrubrik (undersidor) ≤ 48 px · startsidans rubrik ≤ 54 px · sidfot 15/13,5 px
========================================================================== */
.section-title { font-size: clamp(2.8rem, 3.2vw, 4rem); }
.top-section .section-title { font-size: clamp(3.2rem, 4.6vw, 5.4rem); }
.top-section .small-title { font-size: clamp(1.7rem, 1.6vw, 2rem); }
.hero .section-title { font-size: clamp(3rem, 4vw, 4.8rem); }
.hero .text-block p { font-size: 1.7rem; }
.ingress, .section-lead { font-size: 1.8rem; line-height: 1.7; }

.section-8f8675db .card-item p { font-size: var(--base-size); }
.footer p, .footer-submenu li { font-size: 1.5rem; line-height: 1.7; }
.footer .text-label { font-size: 1.3rem; }
.footer-bottom p { font-size: 1.35rem; }
@media (max-width: 750px) {
    .section-title { font-size: 2.7rem; }
    .top-section .section-title { font-size: 3.2rem; }
    .hero .section-title { font-size: 3rem; }
    .ingress, .section-lead { font-size: 1.7rem; }
}

/* Rutor som ska synas tydligt mot den vita bakgrunden med mönster:
   samma ljuslila ton som annons- och kontaktrutorna */
.role-card, .faq-item {
    background: rgb(var(--primary-light-color));
    border-color: rgba(var(--primary-color), .18);
    box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .08);
}
.role-card .role-icon { background: rgb(var(--white-color)); }
.role-card:hover { background: rgb(var(--accent-color)); }
.faq-item[open] { border-color: rgba(var(--primary-color), .35); }

/* Karriär: annonskorten visar bara en rad av sammanfattningen */
.cards-wrapper .card-item[data-sista-dag] .card-body > p {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; padding-bottom: 0 !important; margin-bottom: 1.6rem;
}
/* Knappen för spontanansökan i toppbilden */
.hero .btn-wrapper { margin-top: 2.4rem; }

/* Spontanansökan-knappen i Karriär-sidans toppbild – utformad som ASH VVS "Akut hjälp":
   fylld knapp med tjock kontrastkant och mjukt pulserande sken (omvända färger: vit/lila) */
.btn.spontan-btn {
    border: 3px solid rgb(var(--accent-color));
    background: rgb(var(--white-color));
    color: rgb(var(--primary-color));
    font-weight: 600;
    box-shadow: 0 0 0 4px rgba(var(--accent-color), .28);
    animation: spontan-glow 2.6s ease-in-out infinite;
}
.btn.spontan-btn i { color: rgb(var(--primary-color)); }
.btn.spontan-btn:hover { background: rgb(var(--accent-color)); transform: translateY(-2px); }
@keyframes spontan-glow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-color), .28); }
    50% { box-shadow: 0 0 0 9px rgba(var(--accent-color), .12); }
}
@media (prefers-reduced-motion: reduce) { .btn.spontan-btn { animation: none; } }

/* Sidfot: rubrikerna större än texten under (storlekarna har bytt plats) */
.footer .text-label { font-size: 1.5rem; }
.footer p, .footer-submenu li { font-size: 1.35rem; }
.footer-bottom p { font-size: 1.2rem; }

/* Integritetspolicyn: mindre text än på övriga sidor (juridisk text) */
.policy-box .section-title { font-size: 2.4rem; }
.policy-box .ingress { font-size: 1.2rem; }
.policy-box .small-title { font-size: 1.3rem; }
.policy-box p, .policy-box li { font-size: 1.1rem; line-height: 1.75; }
.policy-box .text-small { font-size: 1.05rem; }

/* Karriär: strecket under annonsens rubrik förlängs när man håller musen över annonsen */
.card-item[data-sista-dag] .border-bottom::after { transition: width .4s ease; }
/* Rubriken är bara så bred som texten, så att strecket kan täcka hela rubriken */
.card-item[data-sista-dag] .border-bottom { width: fit-content; max-width: 100%; }
.card-item[data-sista-dag]:hover .border-bottom::after,
.card-item[data-sista-dag]:focus-visible .border-bottom::after { width: 100%; }
@media (prefers-reduced-motion: reduce) { .card-item[data-sista-dag] .border-bottom::after { transition: none; } }

/* ==========================================================================
Tjänstesidor inom controlling (/tjanster/…) – SEO-sidor
========================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; font-size: 1.4rem; color: rgba(var(--white-color), .8); }
.breadcrumb a { color: rgba(var(--white-color), .85); text-decoration: none; }
.breadcrumb a:hover { color: rgb(var(--white-color)); text-decoration: underline; }

.btn-outline-white { border-color: rgba(var(--white-color), .85); color: rgb(var(--white-color)); background: transparent; }
.btn-outline-white:hover { background: rgba(var(--white-color), .14); }
.svc-section .section-title { margin-bottom: 3rem; }

.svc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.svc-box {
    padding: 3rem; border: 1px solid rgba(var(--primary-color), .18); border-radius: var(--radius);
    background: rgb(var(--primary-light-color));
    box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.svc-box:hover { transform: translateY(-.5rem); border-color: rgba(var(--primary-color), .35); box-shadow: var(--shadow); background: rgb(var(--accent-color)); }
.svc-box .small-title { padding-bottom: 1.2rem; }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: .5rem 0 .5rem 2.8rem; font-size: 1.5rem; }
.check-list li::before { content: '\f00c'; position: absolute; left: 0; top: .6rem; font: var(--fa-font-solid); color: rgb(var(--primary-color)); }
.svc-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 3rem;
    padding: 4.5rem 5rem; border-radius: calc(var(--radius) * 1.5);
    background: linear-gradient(135deg, rgb(var(--primary-color)), rgb(var(--primary-dark-color)));
}
.svc-cta .section-title { margin-bottom: .8rem; }
.svc-cta p { padding: 0; color: rgba(var(--white-color), .82); }
.svc-cta .btn { flex: none; }
.svc-related { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; margin-top: 4rem; }
.svc-related .small-title { padding: 0; margin-right: .8rem; }
.svc-related a { color: rgb(var(--primary-color)); font-weight: 500; text-decoration: none; }
.svc-related a:hover { text-decoration: underline; }
.svc-related a i { margin-left: .4rem; font-size: 1.2rem; }
@media (max-width: 980px) {

    .svc-cols { grid-template-columns: 1fr; }
    .svc-cta { flex-direction: column; align-items: flex-start; padding: 3.6rem 2.8rem; }
}

/* Interim: samarbetsformerna i 2x2 */
@media (min-width: 768px) { .section-forms .role-grid { grid-template-columns: repeat(2, 1fr); } }

/* Tjänstesidor: utökad grå ruta med förklaring och snabbfakta */
.svc-intro {
    display: grid; grid-template-columns: 1fr 30rem; gap: 4.8rem; align-items: start;
    margin-bottom: 4rem; padding: 4.4rem 4.8rem; border-radius: var(--radius);
    background: rgba(243, 243, 245, .92);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.svc-intro .section-title { margin-bottom: 1.6rem; }
.svc-intro p { color: rgb(var(--gray-dark-color)); }
.svc-intro p.svc-lead { font-size: 1.8rem; color: rgb(var(--black-color)); }
.svc-intro-text > :last-child { padding-bottom: 0; margin-bottom: 0; }
.svc-facts { display: grid; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.svc-facts li { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.6rem 1.8rem; border-radius: 1.2rem; background: rgb(var(--white-color)); font-size: 1.5rem; }
.svc-facts i { margin-top: .3rem; font-size: 1.8rem; color: rgb(var(--primary-color)); }
.svc-facts strong { display: block; font-weight: 600; }
.svc-hero .breadcrumb { position: relative; z-index: 2; }
@media (max-width: 991px) { .svc-intro { grid-template-columns: 1fr; gap: 2.8rem; padding: 3.2rem 2.8rem; } }
@media (max-width: 580px) { .svc-intro { padding: 2.6rem 2rem; } }

/* Interim: fyra steg, där sista steget är målet (med konfetti) */
.steps-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps-flow::before { content: ''; position: absolute; top: 2.2rem; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--primary-color), .35) 0 .8rem, transparent .8rem 1.6rem); }
.flow-step {
    position: relative; padding: 5.2rem 2.4rem 2.6rem; text-align: center;
    border: 1px solid rgba(var(--primary-color), .18); border-radius: var(--radius);
    background: rgb(var(--primary-light-color)); box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .08);
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.flow-step:hover { transform: translateY(-.5rem); box-shadow: var(--shadow); background: rgb(var(--accent-color)); }
.flow-num {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
    background: rgb(var(--primary-color)); color: rgb(var(--white-color)); font-weight: 600; font-size: 1.6rem;
    box-shadow: 0 0 0 .6rem rgb(var(--white-color));
}
.flow-icon { display: block; margin-bottom: 1.2rem; font-size: 2.6rem; color: rgb(var(--primary-color)); }
.flow-step .small-title { padding-bottom: .8rem; }
.flow-step p { padding: 0; font-size: 1.5rem; color: rgb(var(--gray-dark-color)); }
.flow-goal { background: rgb(var(--primary-color)); border-color: rgb(var(--primary-color)); overflow: visible; }
.flow-goal:hover { background: rgb(var(--primary-color)); }
.flow-goal .small-title, .flow-goal p, .flow-goal .flow-icon { color: rgb(var(--white-color)); }
.flow-goal p { opacity: .88; }
.flow-goal .flow-num { background: rgb(var(--white-color)); color: rgb(var(--primary-color)); box-shadow: 0 0 0 .6rem rgb(var(--primary-color)), 0 0 0 .9rem rgb(var(--white-color)); }
.flow-goal.celebrate .flow-icon { animation: cheers .9s ease .1s 2; }
@keyframes cheers { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.2); } 60% { transform: rotate(10deg) scale(1.15); } }
.confetti { position: absolute; top: 50%; left: 50%; width: .9rem; height: 1.4rem; border-radius: .2rem; pointer-events: none; opacity: 0; }
.celebrate .confetti { animation: confetti 1.6s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--d); }
@keyframes confetti {
    0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.6); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}
@media (max-width: 991px) {
    .steps-flow { grid-template-columns: repeat(2, 1fr); row-gap: 4.4rem; }
    .steps-flow::before { display: none; }
}
@media (max-width: 580px) { .steps-flow { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .celebrate .confetti, .flow-goal.celebrate .flow-icon { animation: none; } }

/* Löptext på mönstrad bakgrund: ljusgrå panel för läsbarhet */
.section-wrapper:not(.hero):not(.bg-primary):not(.bg-image):not(.bg-gray-light) .text-block {
    padding: 3.2rem 3.6rem;
    border-radius: var(--radius);
    background: rgba(243, 243, 245, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.section-wrapper:not(.hero):not(.bg-primary):not(.bg-image):not(.bg-gray-light) .text-block > :last-child { padding-bottom: 0; margin-bottom: 0; }
@media (max-width: 767px) {
    .section-wrapper:not(.hero):not(.bg-primary):not(.bg-image):not(.bg-gray-light) .text-block { padding: 2.4rem 2rem; }
}

/* Gardineffekt på undersidor: toppbilden står still och innehållet glider upp över den.
   Lagerordning: toppbild (-2) < vit gardin (-1) < mönster (body::after, -1, senare i DOM) < innehåll */
.curtain .LayoutPage > :first-child { position: sticky; top: var(--menu-height-scrolled); z-index: -2; }
.curtain .LayoutPage { position: relative; }
.curtain .LayoutPage::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: var(--hero-h, 40rem); z-index: -1;
    background: rgb(var(--white-color));
    box-shadow: 0 -1.6rem 4rem rgba(var(--primary-dark-color), .18);
}
/* Startsidan: sista steget i "Hur vi jobbar" firar också */

/* Finans: översiktssida */
.svc-cards .card-item { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.svc-cards .card-body { display: flex; flex-direction: column; flex: 1; }
.svc-cards .card-body p { flex: 1; }
.svc-cards .card-item:hover .card-more i { transform: translateX(.4rem); }
.why-box { max-width: none; }
.why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 3.2rem; margin-top: 1.6rem; }
.anlita-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.anlita-row a {
    display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.6rem 1.6rem; text-align: center;
    border: 1px solid rgba(var(--primary-color), .18); border-radius: var(--radius); background: rgb(var(--primary-light-color));
    color: inherit; font-weight: 500; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.anlita-row a:hover { transform: translateY(-.5rem); box-shadow: var(--shadow); background: rgb(var(--accent-color)); }
.anlita-row i { font-size: 2.4rem; color: rgb(var(--primary-color)); }
.finans-ovrigt { margin-top: 3rem; text-align: center; color: rgb(var(--gray-dark-color)); }
@media (max-width: 991px) { .anlita-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .why-list { grid-template-columns: 1fr; } }
.anlita-row strong { font-weight: 600; }
.anlita-row span { font-size: 1.4rem; font-weight: 400; line-height: 1.6; color: rgb(var(--gray-dark-color)); }

/* Vem personen är anställd hos – på korten för samarbetsformer */
.anst {
    display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; padding: .5rem 1.2rem;
    border-radius: 2rem; background: rgb(var(--white-color)); color: rgb(var(--primary-color));
    font-size: 1.3rem; font-style: normal; font-weight: 500; line-height: 1.4;
}
.anst i { font-size: 1.2rem; }
.role-card .anst { align-self: flex-start; margin: 0 0 1.2rem; }

/* Startsidan: snabbval av roll i toppen */

/* Två ingångar: företag och kandidater */

/* Områden Finans och IT */
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.area-tile { position: relative; overflow: hidden; border-radius: var(--radius); color: rgb(var(--white-color)); }
.area-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.area-tile:hover img { transform: scale(1.04); }
.area-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--primary-dark-color), .55) 0%, rgba(var(--primary-dark-color), .92) 100%); }
.area-body { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 44rem; padding: 4rem; }
.area-body h3 { font-size: 3rem; font-weight: 500; color: rgb(var(--white-color)); padding-bottom: 1rem; }
.area-body p { color: rgba(var(--white-color), .88); }
.area-body ul { margin: 1.2rem 0 2.4rem; padding: 0; list-style: none; flex: 1; }
.area-body li a { display: flex; justify-content: space-between; padding: 1.1rem 0; border-bottom: 1px solid rgba(var(--white-color), .2); color: rgb(var(--white-color)); text-decoration: none; }
.area-body li a i { transition: transform .25s ease; }
.area-body li a:hover i { transform: translateX(.4rem); }
.area-body .btn { align-self: flex-start; }
/* Siffror */

@media (max-width: 991px) {
    .ingang-grid, .area-grid { grid-template-columns: 1fr; }

}
@media (max-width: 580px) {  .area-body { padding: 2.8rem 2.2rem; } }

/* Mobil: kompaktare startsida – mindre text och tätare avstånd */
@media (max-width: 580px) {
    :root { --section-padding: 4rem; }
    .top-section { min-height: 0; padding-top: 4.4rem; padding-bottom: 4.4rem; }
    .top-section .section-title { font-size: 2.6rem; line-height: 1.25; }
    .top-section p.small-title { font-size: 1.4rem; line-height: 1.5; }
    .top-section .bouncing-arrow-wrapper { display: none; }
    .hero-ctas .btn { padding: .9rem 1.8rem; font-size: 1.4rem; }

    .section-title { font-size: 2.4rem; }

    .area-grid { gap: 1.2rem; }
    .area-body { min-height: 0; padding: 2.4rem 2rem; }
    .area-body h3 { font-size: 2.2rem; padding-bottom: .4rem; }
    .area-body p { display: none; }
    .area-body ul { margin: .4rem 0 1.6rem; }
    .area-body li a { padding: .8rem 0; font-size: 1.4rem; }

    .anlita-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .anlita-row a { padding: 1.6rem 1rem; gap: .6rem; font-size: 1.4rem; }
    .anlita-row i { font-size: 2rem; }
    .anlita-row span { display: none; }
    .anlita-row .anst { padding: .3rem .8rem; font-size: 1.1rem; }
    .anlita-row .anst i { font-size: 1rem; }
    .timeline-item .card-body p, .section-jobb .card-body > p { display: none; }

    .faq-item summary { font-size: 1.4rem; }
    .section-jobb .list-row { display: none; }

    .section-jobb .card-body { padding: 2rem !important; }
}

/* Startsidan: rollvalet som vita knappar (samma effekt som Hitta konsult) */

/* En panel med två ingångar */

/* Rollvalet: tillbaka till genomskinliga knappar med vit kant, tydlig effekt vid hover */

/* Gardinen: toppbilden ligger bakom sidans lager – släpp igenom klick så att länkar i toppen fungerar */
body.curtain, body.curtain main, body.curtain .LayoutPage { pointer-events: none; }
body.curtain > *, body.curtain .LayoutPage > * { pointer-events: auto; }

/* Tjänstekorten får samma effekt som annonskorten på Karriär: lyft + strecket under rubriken växer */
.svc-cards .card-item .border-bottom, .role-card .border-bottom { width: fit-content; max-width: 100%; }
.svc-cards .card-item .border-bottom::after { transition: width .4s ease; }
.svc-cards .card-item:hover .border-bottom::after, .svc-cards .card-item:focus-visible .border-bottom::after { width: 100%; }
@media (prefers-reduced-motion: reduce) { .svc-cards .card-item .border-bottom::after { transition: none; } }

/* Mobil: ännu kortare sida */
@media (max-width: 580px) {

    .section-process .btn-wrapper { margin-top: 0; }
    .section-faq .faq-item:nth-child(n+5) { display: none; }
    .section-omraden .mb-2, .section-anlita .mb-2, .section-process .mb-2, .section-faq .mb-2, .section-jobb .mb-2 { margin-bottom: 1.6rem !important; }
    .text-label { margin-bottom: .4rem; }
}

/* Mobil, hela sajten: samma kompakta textformat som startsidan */
@media (max-width: 580px) {
    :root { --base-size: 1.4rem; }
    p, li { line-height: 1.65; }
    .small-title { font-size: 1.6rem; }
    .text-label { font-size: 1.1rem; }
    /* Toppbilder på undersidor */
    .hero { padding-top: 3.6rem; padding-bottom: 3.6rem; }
    .hero .section-title { font-size: 2.4rem; }
    .hero .text-block p, .hero p { font-size: 1.4rem; }
    .hero .btn { padding: .9rem 1.8rem; font-size: 1.3rem; }
    .bg-text { font-size: 7rem; }
    /* Kort i allmänhet */
    .card-item .card-body, .card-item .card-body.p-2 { padding: 1.8rem !important; }
    .card-6-1 .image-wrapper { max-height: 16rem; }
    .text-block { padding: 2.2rem 1.8rem; }
    /* Jobbannonser: lista, filter och annonssida */
    .job-tag { font-size: 1.1rem; padding: .3rem .9rem; }
    .card-item[data-sista-dag] .small-title { margin-bottom: .8rem; }
    .cards-wrapper .card-item[data-sista-dag] .card-body > p { margin-bottom: 1rem; }
    .list-row { gap: .4rem 1.2rem; }
    .list-row li { font-size: 1.25rem; }
    .job-filter-btn { padding: .5rem 1.1rem; font-size: 1.2rem; }
    .job-page .section-wrapper:not(.hero) h2, .job-page .section-title { font-size: 2rem; }
    .hero .list-row li { font-size: 1.3rem; }
    .ingress, .ingress p { font-size: 1.5rem; }
    .job-page .hero .section-title { font-size: 2.2rem; }
    /* Tjänstesidor */
    .svc-intro { padding: 2.2rem 1.8rem; gap: 1.6rem; }
    .svc-intro p.svc-lead { font-size: 1.5rem; }
    .svc-facts li { padding: 1.1rem 1.3rem; font-size: 1.3rem; }
    .svc-box { padding: 2rem 1.8rem; }
    .check-list li { font-size: 1.35rem; padding-left: 2.4rem; }
    .svc-cta { padding: 2.6rem 2rem; }
    /* Sidfot */
    .footer .text-label { font-size: 1.2rem; }
    .footer p, .footer li, .footer a { font-size: 1.3rem; }
}

/* Typografi i nivå med jämförbara sajter (Gazella): rubriker max 32 px, brödtext 16 px */
.section-title { font-size: clamp(2.4rem, 2.6vw, 3.2rem); }
.top-section .section-title { font-size: clamp(3rem, 4vw, 5rem); }
.top-section .small-title, .top-section p.small-title { font-size: clamp(1.6rem, 1.4vw, 1.8rem); }
.hero .section-title { font-size: clamp(2.8rem, 3.4vw, 4.2rem); }
.ingress, .section-lead, .svc-intro p.svc-lead { font-size: 1.7rem; }
.small-title { font-size: 1.9rem; }
.area-body h3 { font-size: 2.4rem; }

.faq-item summary { font-size: 1.6rem; }

.svc-cta .section-title { font-size: clamp(2.2rem, 2.4vw, 2.8rem); }
@media (max-width: 1180px) { .TemplateMenu a { font-size: 1.8rem; padding: 1.2rem 0; } .TemplateMenu .SubMenu a { font-size: 1.6rem; } }
@media (max-width: 580px) {
    :root { --base-size: 1.5rem; }
    .section-title { font-size: 2.2rem; }
    .top-section .section-title { font-size: 2.8rem; }
    .hero .section-title { font-size: 2.6rem; }
    .small-title { font-size: 1.7rem; }
    .area-body h3 { font-size: 2.1rem; }

    .faq-item summary { font-size: 1.5rem; }

    .TemplateMenu a { font-size: 1.7rem; }
}

/* Ansökningsformulär: samma mönstrade bakgrund som övriga sidor, formuläret i en grå ruta */
.section-apply .ContactForm { padding: 4rem; border-radius: var(--radius); background: rgba(243, 243, 245, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero .back-link { position: relative; z-index: 2; }
@media (max-width: 580px) { .section-apply .ContactForm { padding: 2.4rem 1.8rem; } }

/* Startsidan: Hur vi jobbar med flikar (interim, rekrytering, kandidater) */
.process-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 0 auto 5.2rem; padding: .6rem; width: fit-content; max-width: 100%; border-radius: 5rem; background: rgb(var(--white-color)); box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .08); }
.process-tab { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 2.2rem; border: 0; border-radius: 5rem; background: none; color: rgb(var(--black-color)); font: inherit; font-size: 1.5rem; font-weight: 500; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.process-tab i { color: rgb(var(--primary-color)); transition: color .25s ease; }
.process-tab:hover { background: rgb(var(--primary-light-color)); }
.process-tab.is-active { background: rgb(var(--primary-color)); color: rgb(var(--white-color)); }
.process-tab.is-active i { color: rgb(var(--white-color)); }
.process-panel[hidden] { display: none; }
.process-panel { animation: panel-in .35s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.steps-flow.steps-5 { grid-template-columns: repeat(5, 1fr); gap: 1.8rem; }
.steps-flow.steps-5 .flow-step { padding-left: 1.8rem; padding-right: 1.8rem; }
@media (max-width: 1180px) { .steps-flow.steps-5 { grid-template-columns: repeat(3, 1fr); row-gap: 4.4rem; } .steps-flow.steps-5::before { display: none; } }
@media (max-width: 991px) { .steps-flow.steps-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) {
    .process-tabs { margin-bottom: 3.6rem; border-radius: 2rem; }
    .process-tab { padding: .8rem 1.4rem; font-size: 1.3rem; }
    .steps-flow.steps-5 { grid-template-columns: 1fr; }
    .section-process .flow-step { padding: 4rem 1.8rem 2rem; }
}
@media (prefers-reduced-motion: reduce) { .process-panel { animation: none; } }

/* Textstorlek i nivå med jämförbara sajter (mätt mot Gazella): ingen brödtext under 16 px, sidfot 14 px */
.check-list li, .flow-step p, .card-body > p, .role-card p { font-size: 1.6rem; }
.footer p, .footer li, .footer a { font-size: 1.4rem; }
.footer .js-copyright, .footer-bottom p, .footer-bottom a { font-size: 1.3rem; }
@media (max-width: 580px) {
    :root { --base-size: 1.6rem; }
    p, li, summary, .faq-item summary, .card-body > p, .flow-step p, .role-card p { font-size: 1.6rem; }
    .check-list li { font-size: 1.5rem; }
    .section-title { font-size: 2.4rem; }
    .top-section .section-title { font-size: 3rem; }
    .hero .section-title { font-size: 2.8rem; }
    .small-title { font-size: 1.8rem; }
    .hero p, .hero .text-block p, .top-section p.small-title, .ingress, .section-lead { font-size: 1.6rem; }
    .text-label { font-size: 1.2rem; }
    .job-tag, .anst, .anlita-row .anst { font-size: 1.2rem; }
    .list-row li, .hero .list-row li { font-size: 1.4rem; }
    .job-filter-btn, .process-tab { font-size: 1.4rem; }
    .footer p, .footer li, .footer a, .footer .text-label { font-size: 1.4rem; }
    .policy-box p, .policy-box li, .policy-box a, .policy-box strong, .policy-box em { font-size: 1.1rem; }
}
.anst { white-space: nowrap; }
@media (max-width: 580px) { .anlita-row .anst { font-size: 1.1rem; padding: .3rem .7rem; } }

/* Startsidan: kort presentation under toppbilden */
.intro-split .split-content { padding: 5.6rem; }
.intro-split .text-block { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: none; }
.intro-split .section-title { padding-bottom: 1.6rem; }

.intro-split .split-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
    .intro-split { flex-direction: column-reverse; }
    .intro-split .split-content, .intro-split .split-image { width: 100%; }
    .intro-split .split-image { min-height: 0; height: 26rem; }
    .intro-split .split-content { padding: 3.6rem 3rem; }
}
@media (max-width: 580px) {
    .intro-split .split-image { height: 20rem; }
    .intro-split .split-content { padding: 2.6rem 2rem; }
}
.section-wrapper .intro-split .text-block { padding: 0 !important; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
@media (max-width: 580px) {  .intro-split .split-image { height: 17rem; } }

/* Startsidan: kort löfte under toppbilden */

/* Platshållare – gul markering som ska bytas mot riktiga uppgifter före publicering */
/* Om oss */
.person-kort, .princip-kort { padding: 3.2rem; border: 1px solid rgba(var(--primary-color), .18); border-radius: var(--radius); background: rgb(var(--primary-light-color)); box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .08); }

.princip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.princip-kort .role-icon { margin-bottom: 1.4rem; }
.plats-kort { padding: 4.4rem 4.8rem; border-radius: var(--radius); background: rgba(243, 243, 245, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 991px) { .princip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) {
    .intro-lofte, .plats-kort { padding: 2.6rem 2rem; }

    .princip-grid { grid-template-columns: 1fr; }
    .person-kort, .princip-kort { padding: 2.4rem 2rem; }
}

.omraden-lead { max-width: 78rem; margin: 0 auto; color: rgb(var(--gray-dark-color)); }
.omraden-lead .card-more { margin-top: 0; white-space: nowrap; }
.section-wrapper .omraden-lead a.card-more { color: rgb(var(--primary-color)); text-decoration: none; font-weight: 500; }
.omraden-lead a.card-more:hover i { transform: translateX(.4rem); }

/* Om oss: vad vi gör – två kolumner */
.om-tva { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.om-kolumn { padding: 3.6rem; border-radius: var(--radius); background: rgba(243, 243, 245, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.om-kolumn .role-icon { margin-bottom: 1.4rem; }
.om-kolumn .card-more { color: rgb(var(--primary-color)); text-decoration: none; }
/* Finans och IT: utförda uppdrag */

@media (max-width: 991px) { .om-tva, .uppdrag-grid { grid-template-columns: 1fr; } }
@media (max-width: 580px) { .om-kolumn, .uppdrag-kort { padding: 2.4rem 2rem; } }

/* Länkar i områdeskorten och Läs mer-länkar: samma effekt som knappen Hitta konsult – fylls, växer och lyfts vid hover */
.area-body li a { margin: 0 -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem; border-radius: 1.2rem; transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, padding .3s ease; }
.area-body li a:hover, .area-body li a:focus-visible { background: rgb(var(--white-color)); color: rgb(var(--primary-color)); transform: translateY(-2px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3); border-bottom-color: transparent; }
.card-more, .role-more { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.2rem; margin-left: -1.2rem; border-radius: 5rem; text-decoration: none !important; transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.card-more:hover, .card-more:focus-visible, .role-more:hover, a:hover .card-more, a:hover .role-more {
    background: rgb(var(--primary-color)); color: rgb(var(--white-color)) !important; transform: translateY(-2px) scale(1.04); box-shadow: 0 .8rem 1.6rem rgba(var(--primary-color), .3);
}
.omraden-lead a.card-more { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .area-body li a, .card-more, .role-more { transition: none; } }

/* Startsidan: lediga jobb som rullande karusell med grå kort */
.job-slider { position: relative; }
.job-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4rem) / 3); gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .8rem .2rem 2.4rem; scrollbar-width: none; }
.job-track::-webkit-scrollbar { display: none; }
.job-track .card-item { scroll-snap-align: start; background: rgb(var(--white-color)) !important; border: 1px solid rgba(var(--primary-color), .14); box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .07); }
.job-track .card-item:hover { box-shadow: var(--shadow); }
.job-nav { display: flex; justify-content: center; gap: 1rem; margin-top: .4rem; }
.job-nav button { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border: 1px solid rgba(var(--primary-color), .3); border-radius: 50%; background: rgb(var(--white-color)); color: rgb(var(--primary-color)); cursor: pointer; transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.job-nav button:hover { background: rgb(var(--primary-color)); color: rgb(var(--white-color)); transform: translateY(-2px); }
@media (max-width: 991px) { .job-track { grid-auto-columns: calc((100% - 2rem) / 2); } }
@media (max-width: 580px) { .job-track { grid-auto-columns: 85%; gap: 1.2rem; } }

/* Jobbkarusellen: kortare text – två rader beskrivning, bara ort och sista dag */
.job-track .card-body { padding: 2.4rem !important; }
.job-track .card-body > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1.2rem; padding-bottom: 0 !important; }
.job-track .list-row li:nth-child(2), .job-track .list-row li:nth-child(3) { display: none; }
.job-track .list-row li { font-size: 1.4rem; }
.job-track .small-title { font-size: 1.8rem; }
@media (max-width: 580px) { .section-jobb .job-track .card-body > p { display: -webkit-box; } .section-jobb .job-track .list-row { display: flex; } }

/* Startsidan: senast tillsatta roller */
.tillsatt-kort { padding: 2.2rem 2.4rem; border: 1px solid rgba(var(--primary-color), .14); border-radius: var(--radius); background: rgb(var(--white-color)); box-shadow: 0 1rem 3rem rgba(var(--primary-dark-color), .07); transition: transform .3s ease, box-shadow .3s ease; }
.tillsatt-kort:hover { transform: translateY(-.4rem); box-shadow: var(--shadow); }
.tillsatt-etikett { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: rgb(var(--primary-color)); font-size: 1.2rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tillsatt-kort .small-title { padding-bottom: .4rem; font-size: 1.7rem; }
.tillsatt-kort p { padding: 0; color: rgb(var(--gray-dark-color)); font-size: 1.5rem; }

@media (max-width: 580px) {  .tillsatt-kort { padding: 1.6rem 1.4rem; } .tillsatt-kort .small-title { font-size: 1.5rem; } .tillsatt-kort p { font-size: 1.3rem; } .section-tillsatta .section-lead { display: none; } }

/* Interim & konsult: utökade samarbetskort */
.section-forms .role-card p { flex: 0 0 auto; }
.samarbete-rubrik { margin: .8rem 0 .2rem; padding: 0; color: rgb(var(--primary-color)) !important; font-size: 1.3rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.samarbete-lista { flex: 1; margin: 0 0 1.6rem; }
.samarbete-lista li { padding: .3rem 0 .3rem 2.6rem; font-size: 1.5rem; }

/* Interim & konsult: samarbetskorten i samma stil som rutorna på Om oss (grå), med hover-effekt */
.section-forms .role-card { border: 0; background: rgba(243, 243, 245, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: none; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
.section-forms .role-card .role-icon { background: rgb(var(--primary-light-color)); }
.section-forms .role-card:hover, .section-forms .role-card:focus-visible { transform: translateY(-.5rem); background: rgb(var(--white-color)); box-shadow: var(--shadow); }
.section-forms .role-card .anst { background: rgb(var(--primary-light-color)); }
/* Om oss: Vad vi gör – samma hover-effekt som samarbetskorten */
.om-kolumn { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
.om-kolumn:hover, .om-kolumn:focus-within { transform: translateY(-.5rem); background: rgb(var(--white-color)); box-shadow: var(--shadow); }
.om-kolumn:hover .card-more { background: rgb(var(--primary-color)); color: rgb(var(--white-color)) !important; transform: translateY(-2px) scale(1.04); box-shadow: 0 .8rem 1.6rem rgba(var(--primary-color), .3); }

/* Startsidan: Läget just nu */

/* Artikelsida */
.artikel { max-width: 78rem; margin: 0 auto; }
.artikel .artikel-ingress { font-size: 2rem; line-height: 1.6; color: rgb(var(--black-color)); }
.artikel h2 { margin: 3.6rem 0 1.2rem; font-size: 2.4rem; font-weight: 500; }
.artikel p, .artikel li { font-size: 1.7rem; line-height: 1.75; }
.artikel .check-list li { padding-left: 3rem; }
.artikel-kallor { margin-top: 4rem; padding: 2.4rem 2.8rem; border-radius: var(--radius); background: rgba(243, 243, 245, .92); }
.artikel-kallor h2 { margin-top: 0; font-size: 1.8rem; }
.artikel-kallor li { font-size: 1.5rem; }
.artikel .btn-wrapper { margin-top: 3.2rem; }

@media (max-width: 580px) { .artikel .artikel-ingress { font-size: 1.7rem; } .artikel h2 { font-size: 2rem; } .artikel p, .artikel li { font-size: 1.6rem; }  }
.section-artikel-hero .breadcrumb, .section-artikel-hero p { position: relative; z-index: 2; }

/* Läget just nu som löpande text, och artikeln – samma grå ruta med lila vänsterkant */
.lage-text, .artikel {
    padding: 4rem 4.4rem; border-left: 3px solid rgb(var(--primary-color)); border-radius: 0 var(--radius) var(--radius) 0;
    background: rgba(243, 243, 245, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lage-text { max-width: 86rem; margin: 0 auto; }
.lage-text p { font-size: 1.7rem; line-height: 1.75; }
.lage-text strong { color: rgb(var(--primary-color)); font-weight: 600; }
.lage-fot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem 2.4rem; margin-top: 1.2rem; }
.lage-fot small { color: rgb(var(--gray-dark-color)); font-size: 1.3rem; }
.lage-fot .card-more { color: rgb(var(--primary-color)); }
.artikel { max-width: 86rem; }
.artikel h2:first-of-type { margin-top: 2.8rem; }
.artikel-kallor { background: rgb(var(--white-color)); }
@media (max-width: 580px) { .lage-text, .artikel { padding: 2.6rem 2rem; } .lage-text p { font-size: 1.6rem; } }
.lage-text { max-width: none; padding: 4.4rem 5.2rem; }
.lage-text p { max-width: 110rem; }
@media (max-width: 580px) { .lage-text { padding: 2.6rem 2rem; } }

/* Finans och IT: länk till samarbetsformerna i Varför-rutan */
.why-lank { margin-top: 1.6rem; padding: 0; }
.why-lank .card-more { margin-left: .2rem; color: rgb(var(--primary-color)); }
/* IT / Tech: egen variant – mörka tjänstekort och Varför som fyra plattor */
.it-variant .svc-cards .card-item { background: rgb(var(--primary-dark-color)) !important; border: 0; color: rgb(var(--white-color)); }
.it-variant .svc-cards .image-wrapper img { filter: saturate(.6) brightness(.85); }
.it-variant .svc-cards .card-body h3, .it-variant .svc-cards .card-body p { color: rgb(var(--white-color)); }
.it-variant .svc-cards .card-body p { opacity: .82; }
.it-variant .svc-cards .border-bottom::after { background: rgb(var(--white-color)); }
.it-variant .svc-cards .card-more { color: rgb(var(--white-color)) !important; }
.it-variant .svc-cards .card-item:hover .card-more { background: rgb(var(--white-color)); color: rgb(var(--primary-dark-color)) !important; }
.it-variant .why-box { text-align: center; }
.it-variant .why-list { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 2.4rem; }
.it-variant .why-list li { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.4rem 1.6rem; border-radius: var(--radius); background: rgb(var(--white-color)); font-size: 1.5rem; }
.it-variant .why-list li::before { display: none; }
.it-variant .why-list li i { display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: rgb(var(--primary-dark-color)); color: rgb(var(--white-color)); font-size: 1.8rem; }
@media (max-width: 991px) { .it-variant .why-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .it-variant .why-list { grid-template-columns: 1fr 1fr; gap: 1rem; } .it-variant .why-list li { padding: 1.6rem 1rem; font-size: 1.35rem; } }

.om-kolumn { display: block; color: inherit; text-decoration: none; }
.om-kolumn:hover .card-more, .om-kolumn:focus-visible .card-more { background: rgb(var(--primary-color)); color: rgb(var(--white-color)) !important; transform: translateY(-2px) scale(1.04); box-shadow: 0 .8rem 1.6rem rgba(var(--primary-color), .3); }

/* Startsidan: tillsatta roller som rullband – övre raden åt höger, nedre åt vänster */
.tillsatt-rullband { position: relative; display: grid; gap: 1.6rem; margin: 0 calc(var(--gutter) * -1); padding-top: 1.2rem; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rullband { overflow: hidden; }
.rullband-spar { display: flex; gap: 1.6rem; width: max-content; padding: .8rem 0 1.6rem; }
.rullband .tillsatt-kort { flex: 0 0 28rem; }
.rullband-vanster .rullband-spar { animation: rull-vanster var(--rull-tid, 40s) linear infinite; }
.rullband-hoger .rullband-spar { animation: rull-hoger var(--rull-tid, 40s) linear infinite; }
.tillsatt-rullband:hover .rullband-spar { animation-play-state: paused; }
@keyframes rull-vanster { from { transform: translateX(0); } to { transform: translateX(calc(-50% - .8rem)); } }
@keyframes rull-hoger { from { transform: translateX(calc(-50% - .8rem)); } to { transform: translateX(0); } }

@media (max-width: 580px) { .rullband .tillsatt-kort { flex-basis: 22rem; } }
@media (prefers-reduced-motion: reduce) {
    .rullband-spar { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
    .rullband .tillsatt-kort[aria-hidden="true"] { display: none; }
}
/* Om oss: utkast till bakgrundshistoria */

/* Rullbanden: ljusgrått band bakom korten så att de syns tydligt */
.rullband { background: rgba(236, 234, 241, .95); }
.tillsatt-rullband { gap: 0; }
.rullband-spar { padding: 2rem 0; }
.rullband .tillsatt-kort { box-shadow: 0 .6rem 1.8rem rgba(var(--primary-dark-color), .1); }

/* Rullbanden: omvända färger – vitt band, grå kort */
.rullband { background: rgb(var(--white-color)); border-top: 1px solid rgba(var(--primary-color), .08); border-bottom: 1px solid rgba(var(--primary-color), .08); }
.rullband + .rullband { border-top: 0; }
.rullband .tillsatt-kort { background: rgb(243, 243, 245); border-color: rgba(var(--primary-color), .1); box-shadow: none; }
.rullband .tillsatt-kort:hover { background: rgb(var(--white-color)); box-shadow: var(--shadow); }

/* Om oss: Vi kan också göra jobbet själva */
.sjalva { display: flex; gap: 3.2rem; align-items: flex-start; padding: 4.4rem 4.8rem; border-left: 3px solid rgb(var(--primary-color)); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(243, 243, 245, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sjalva-ikon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: rgb(var(--primary-color)); color: rgb(var(--white-color)); font-size: 2.4rem; }
.sjalva .section-title { padding-bottom: 1.2rem; }
.sjalva-lista { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 2.4rem; margin: 1.2rem 0 2rem; }
/* Startsidan: rad under Så kan ni anlita oss */

@media (max-width: 767px) {
    .sjalva { flex-direction: column; gap: 1.6rem; padding: 2.8rem 2.2rem; }
    .sjalva-lista { grid-template-columns: 1fr; }

}

/* Vanliga frågor: samma knappeffekt som Kontakta oss – lila fyllning, vit text och lyft vid hovring */
.faq-item { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.faq-item summary { border-radius: var(--radius); transition: background-color .3s ease, color .3s ease; }
.faq-item summary::after { transition: transform .3s ease, color .3s ease; }
.faq-item:hover { transform: translateY(-2px); border-color: rgb(var(--primary-color)); box-shadow: 0 1rem 2rem rgba(var(--primary-color), .3); }
.faq-item summary:hover, .faq-item summary:focus-visible { background: rgb(var(--primary-color)); color: rgb(var(--white-color)); }
.faq-item summary:hover::after, .faq-item summary:focus-visible::after { color: rgb(var(--white-color)); }
.faq-item[open] summary { border-radius: var(--radius) var(--radius) 0 0; }
@media (prefers-reduced-motion: reduce) { .faq-item, .faq-item summary { transition: none; } .faq-item:hover { transform: none; } }

/* Startsidan: Vi kan också göra jobbet själva – lila banner under Två områden */
.sjalva-banner { display: flex; align-items: center; gap: 2.4rem; margin-top: 2.4rem; padding: 3.2rem 4rem; border-radius: var(--radius); background: linear-gradient(110deg, rgb(var(--primary-dark-color)) 0%, rgb(var(--primary-color)) 100%); color: rgb(var(--white-color)); text-decoration: none; box-shadow: 0 1.6rem 3.6rem rgba(var(--primary-color), .28); transition: transform .3s ease, box-shadow .3s ease; }
.sjalva-banner:hover { transform: translateY(-.4rem); box-shadow: 0 2rem 4.4rem rgba(var(--primary-color), .38); }
.sjalva-banner-ikon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; background: rgba(var(--white-color), .16); font-size: 2.4rem; }
.sjalva-banner-text { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.sjalva-banner-text strong { font-size: 2.2rem; font-weight: 600; line-height: 1.3; }
.sjalva-banner-text span { font-size: 1.6rem; opacity: .9; }
.sjalva-banner .btn { flex: none; }
.sjalva-banner:hover .btn { background: rgb(var(--accent-color)); transform: translateY(-2px); }
@media (max-width: 767px) { .sjalva-banner { flex-direction: column; align-items: flex-start; padding: 2.6rem 2.2rem; gap: 1.4rem; } .sjalva-banner-text strong { font-size: 1.9rem; } }

/* Bannern: mörklila med guldaccent och mjuk puls */
.sjalva-banner { background: linear-gradient(120deg, #1f0f33 0%, #3b1a5c 55%, #5b2a86 100%); border: 1px solid rgba(244, 197, 66, .55); box-shadow: 0 0 0 0 rgba(244, 197, 66, .45); animation: banner-puls 2.6s ease-out infinite; }
.sjalva-banner:hover { animation-play-state: paused; box-shadow: 0 2rem 4.4rem rgba(31, 15, 51, .45); }
@keyframes banner-puls { 0% { box-shadow: 0 0 0 0 rgba(244, 197, 66, .45); } 70% { box-shadow: 0 0 0 1.4rem rgba(244, 197, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 197, 66, 0); } }
.sjalva-banner-ikon { background: #f4c542; color: #3a2a00; }
.sjalva-banner .btn { background: #f4c542; color: #2a1a00; border-color: #f4c542; font-weight: 600; }
.sjalva-banner:hover .btn { background: #ffd765; color: #2a1a00; }
.sjalva-status { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: .2rem; color: #f4c542; font-size: 1.2rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 1 !important; }
.puls-prick { position: relative; width: 1rem; height: 1rem; border-radius: 50%; background: #4ade80; }
.puls-prick::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #4ade80; animation: prick-puls 1.6s ease-out infinite; }
@keyframes prick-puls { from { transform: scale(1); opacity: .8; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sjalva-banner, .puls-prick::after { animation: none; } }

/* Bannern: röd pulserande kant */
.sjalva-banner { border: 2px solid #e5484d; animation: banner-puls-rod 2s ease-out infinite; }
@keyframes banner-puls-rod { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); } 70% { box-shadow: 0 0 0 1.6rem rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
/* Nyckelord i bannern och på Om oss */
.sjalva-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; opacity: 1 !important; }
.sjalva-chips span { padding: .3rem 1rem; border: 1px solid rgba(244, 197, 66, .6); border-radius: 2rem; color: #f4c542; font-size: 1.25rem !important; font-weight: 500; opacity: 1 !important; }
.sjalva-nyckel-rubrik { margin: .4rem 0 .8rem; padding: 0; color: rgb(var(--primary-color)); font-size: 1.3rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sjalva-nyckel { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }
.sjalva-nyckel span { padding: .6rem 1.4rem; border-radius: 2rem; background: rgb(var(--white-color)); border: 1px solid rgba(var(--primary-color), .2); color: rgb(var(--primary-color)); font-size: 1.4rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sjalva-banner { animation: none; } }
/* Om oss: Vi kan också göra jobbet själva – samma röda pulserande kant som bannern */
.sjalva { border: 2px solid #e5484d; border-radius: var(--radius); animation: banner-puls-rod 2s ease-out infinite; }
.sjalva:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sjalva { animation: none; } }
/* Bannerknappen: pulserande gul */
.sjalva-banner .btn { animation: knapp-puls-gul 1.8s ease-out infinite; }
.sjalva-banner:hover .btn { animation-play-state: paused; }
@keyframes knapp-puls-gul { 0% { box-shadow: 0 0 0 0 rgba(244, 197, 66, .75); } 70% { box-shadow: 0 0 0 1.4rem rgba(244, 197, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 197, 66, 0); } }
@media (prefers-reduced-motion: reduce) { .sjalva-banner .btn { animation: none; } }
/* Kontakt: vägval under kontaktkorten */
.kontakt-vagval { margin-top: 3.2rem; }
.kontakt-vagval .section-title { padding-bottom: 1.2rem; }
.kontakt-vagval .small-title { margin: 1.6rem 0 .4rem; }
.kontakt-vagval a { color: rgb(var(--primary-color)); }
/* Menyknappen: 44×44 px tryckyta utan att ikonen ändras */
.hamburger::after { content: ''; position: absolute; inset: -7px; }
/* Spontanansökan: var vill du arbeta? */
.ort-val { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 0 0 1.6rem; padding: 0; border: 0; }
.ort-val legend { width: 100%; margin-bottom: .8rem; padding: 0; font-size: 1.5rem; color: rgb(var(--gray-dark-color)); }
.ort-val label { display: inline-flex; align-items: center; gap: .8rem; min-height: 4.4rem; padding: .6rem 1.6rem; border: 1px solid rgba(91, 42, 134, .2); border-radius: 1rem; background: rgb(var(--white-color)); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.ort-val input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: rgb(var(--primary-color)); }
.ort-val label:has(input:checked) { border-color: rgb(var(--primary-color)); background: rgba(91, 42, 134, .06); }
.ort-val label:has(input:focus-visible) { outline: 2px solid rgb(var(--primary-color)); outline-offset: 2px; }
/* Lugnare färger: lila som huvudfärg, guld som enda accent, puls bara på den gröna pricken */
.sjalva-banner { border: 1px solid rgba(244, 197, 66, .55); animation: none; box-shadow: 0 1.2rem 3.2rem rgba(31, 15, 51, .28); }
.sjalva-banner .btn { animation: none; }
.sjalva { border: 1px solid rgba(var(--primary-color), .25); border-left: 4px solid #f4c542; animation: none; }
.btn.spontan-btn { animation: none; }
/* TEST-markeringar – tas bort före publicering (bygget varnar) */
.test-andring { margin: 0 auto 1.2rem; max-width: 80rem; color: #d00000 !important; font-weight: 700 !important; font-size: 1.5rem; line-height: 1.5; }
/* TEST-läge (test-prick.js): röd prick, hörnkort, ändringslista – tas bort före publicering */
.test-prick { position: relative; display: inline-block; width: .8em; height: .8em; margin-left: .35em; border-radius: 50%; background: #d00000; box-shadow: 0 0 0 2px #fff; vertical-align: middle; cursor: help; flex: none; }
.test-prick:focus { outline: 2px solid #d00000; outline-offset: 2px; }
.test-ruta { position: fixed; z-index: 100001; max-width: min(38rem, 86vw); padding: 1rem 1.2rem; border: 2px solid #d00000; border-radius: .8rem; background: #fff; color: #222;
    font: 500 1.35rem/1.5 'Poppins', Arial, sans-serif; text-align: left; white-space: pre-line; box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .22); pointer-events: none; }
.test-hornkort { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 50; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border: 2px solid #d00000; border-radius: 2rem;
    background: #fff; color: #d00000 !important; font: 700 1.25rem/1.2 'Poppins', Arial, sans-serif; text-decoration: none; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .15); pointer-events: auto; }
.test-hornkort:hover, .test-hornkort:focus-visible { background: #d00000; color: #fff !important; }
.test-hornkort:hover .test-hornkort-prick, .test-hornkort:focus-visible .test-hornkort-prick { background: #fff; }
.test-hornkort-prick { width: .9rem; height: .9rem; border-radius: 50%; background: #d00000; flex: none; }
.test-panel { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; max-width: min(40rem, calc(100vw - 2.4rem)); pointer-events: auto; }
.test-panel-knapp { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border: 2px solid #d00000; border-radius: 2rem; background: #fff; color: #d00000; font: 700 1.35rem/1.2 'Poppins', Arial, sans-serif; cursor: pointer; box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .2); }
.test-panel ol { max-height: 50vh; overflow: auto; margin: 0; padding: 1rem 1.2rem 1rem 3rem; border: 2px solid #d00000; border-radius: .8rem; background: #fff; box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .22); font: 500 1.35rem/1.5 'Poppins', Arial, sans-serif; }
.test-panel li + li { margin-top: .6rem; }
.test-panel a { color: #222; text-decoration: underline; text-decoration-color: #d00000; }
.test-andring { scroll-margin-top: 12rem; }
.test-blink { animation: test-blink 1.6s ease 2; }
@keyframes test-blink { 0%, 100% { background: transparent; } 50% { background: rgba(208, 0, 0, .12); } }
/* Interim & konsult: guiden "Vilket upplägg passar er?" */
.guide { max-width: 80rem; margin: 0 auto; padding: 3.2rem 3.6rem; border-radius: var(--radius); background: rgba(243, 243, 245, .92); }
.guide-ingress { margin-bottom: 2.4rem; max-width: 64rem; }
.guide-ingress p + p { margin-top: 1rem; }
.guide-steg + .guide-steg { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(var(--primary-color), .12); }
.guide-fraga { margin-bottom: 1rem; font-weight: 600; color: rgb(var(--black-color)); }
.guide-val { display: flex; flex-wrap: wrap; gap: 1rem; }
.guide-knapp { min-height: 4.4rem; padding: 1rem 1.8rem; border: 1px solid rgba(var(--primary-color), .3); border-radius: 1rem; background: rgb(var(--white-color)); color: rgb(var(--primary-color)); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.guide-knapp:hover { border-color: rgb(var(--primary-color)); }
.guide-knapp.is-vald { background: rgb(var(--primary-color)); border-color: rgb(var(--primary-color)); color: rgb(var(--white-color)); }
.guide-resultat { margin-top: 2.4rem; padding: 2.4rem; border-left: 4px solid #f4c542; border-radius: 0 1rem 1rem 0; background: rgb(var(--white-color)); outline: none; animation: panel-in .35s ease; }
.guide-etikett { margin-bottom: .4rem; color: rgb(var(--primary-color)); font-size: 1.3rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.guide-lankar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-top: 1.6rem; }
.guide-las { color: rgb(var(--primary-color)); font-weight: 600; text-decoration: underline; }
.guide-om { margin-top: 1.6rem; padding: .6rem 0; border: 0; background: none; color: rgb(var(--gray-dark-color)); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 767px) { .guide { padding: 2.4rem 2rem; } .guide-knapp { flex: 1 1 100%; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .guide-resultat { animation: none; } }
/* Guiden bredare: text till vänster, frågor till höger på dator */
.guide { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.4rem 5.6rem; align-items: start; padding: 4.4rem 4.8rem; }
.guide-text .guide-ingress { margin-bottom: 0; }
.guide-fragor .guide-steg:first-child { margin-top: .4rem; }
@media (max-width: 991px) { .guide { grid-template-columns: 1fr; gap: 1.6rem; padding: 3.2rem 2.8rem; } }
@media (max-width: 767px) { .guide { padding: 2.4rem 2rem; } }
/* IT / Tech: levande toppbild (it-live.js) och bilder som lever */
.it-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: screen; }
.section-2f5d315c .bg-image-wrapper img { animation: it-glid 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.it-levande-bilder .svc-cards .image-wrapper img { animation: it-glid 18s ease-in-out infinite alternate; }
.it-levande-bilder .svc-cards .card-item:nth-child(2n) .image-wrapper img { animation-duration: 22s; animation-delay: -6s; transform-origin: 30% 60%; }
.it-levande-bilder .svc-cards .card-item:nth-child(3n) .image-wrapper img { animation-duration: 25s; animation-delay: -11s; transform-origin: 70% 30%; }

@keyframes it-glid { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) { .section-2f5d315c .bg-image-wrapper img, .it-levande-bilder .svc-cards .image-wrapper img { animation: none; } }
.test-andring.pa-mork { display: inline-block; padding: .3rem 1rem; border-radius: .4rem; background: #fff; }
/* Guidens svarsknappar: samma hover som sajtens knappar – fylls lila, lyfts och får skugga */
.guide-knapp { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.guide-knapp:hover, .guide-knapp:focus-visible { background: rgb(var(--primary-color)); border-color: rgb(var(--primary-color)); color: rgb(var(--white-color)); transform: translateY(-2px); box-shadow: 0 1rem 2rem rgba(var(--primary-color), .3); }
.guide-knapp.is-vald:hover { background: rgb(var(--primary-dark-color)); border-color: rgb(var(--primary-dark-color)); }
@media (prefers-reduced-motion: reduce) { .guide-knapp:hover, .guide-knapp:focus-visible { transform: none; } }
/* Guiden: två kolumner redan från surfplattsbredd, ingressen fyller bredden i en kolumn */
@media (max-width: 991px) and (min-width: 768px) { .guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem 3.2rem; padding: 3.6rem 3.2rem; } }
@media (max-width: 767px) { .guide-ingress { max-width: none; } }
/* IT / Tech: levande bakgrundsfigurer i tjänsteavsnittet – täcker det fasta mönstret så figurerna inte dubbleras */
.it-levande-bilder { position: relative; overflow: hidden; }
/* IT-sidan: levande figurer ersätter det fasta mönstret – samma suddighet och ton som body::after */
body.it-sida::after, body.live-bakgrund::after { background: url('/assets/images/graphics/bg-logo.svg') center / cover no-repeat; }
.it-figurer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; filter: blur(3px); opacity: .85; }
.it-levande-bilder > .section-block { position: relative; z-index: 1; }
/* Snabb inzoomning vid hovring – 'scale' läggs ovanpå den långsamma glidningen */
.it-levande-bilder .svc-cards .image-wrapper img { transition: scale .45s cubic-bezier(.2, .7, .2, 1); }
.it-levande-bilder .svc-cards .card-item:hover .image-wrapper img, .it-levande-bilder .svc-cards .card-item:focus-visible .image-wrapper img { scale: 1.14; }
/* Mjuk vit glöd bakom text som står direkt på bakgrundsmönstret, så figurerna inte stör läsningen */
.mb-2.text-center, .kontakt-vagval, .svc-related, .section-faq .block-object > p { position: relative; isolation: isolate; }
.mb-2.text-center::before, .kontakt-vagval::before, .svc-related::before, .section-faq .block-object > p::before { content: ''; position: absolute; inset: -3rem -6rem; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, 0) 75%); }
@media (max-width: 767px) { .mb-2.text-center::before, .kontakt-vagval::before, .svc-related::before, .section-faq .block-object > p::before { inset: -2rem -1.6rem; } }
/* Mjuk vit glöd runt rutor och kortgrupper, så bakgrundsfigurerna tonar bort en bit innan texten.
   Glöden ligger på behållaren runt korten (inte på varje kort) så den aldrig hamnar över grannkortet. */
:root { --glod: 0 0 3.6rem 2.4rem rgba(255, 255, 255, .9); }
.text-block.mb-2, .why-box, .guide, .lage-text, .sjalva, .split-wrapper.intro-split, .plats-kort, .svc-intro, .artikel, .policy-box,
.cards-wrapper, .faq-list, .steps-flow, .role-grid, .om-tva, .princip-grid, .svc-cols, .kontakt-vagval, .ContactForm, .svc-cta {
    box-shadow: var(--glod);
}
.sjalva-banner { box-shadow: 0 1.2rem 3.2rem rgba(31, 15, 51, .28), var(--glod); }
.cards-wrapper, .faq-list, .steps-flow, .role-grid, .om-tva, .princip-grid, .svc-cols { border-radius: var(--radius); }
@media (max-width: 767px) { :root { --glod: 0 0 2.4rem 1.4rem rgba(255, 255, 255, .9); } }
/* Finans: snöbilden är ljus – mörkare ton längst ner så bakgrundsordet syns som på övriga sidor */
.section-fb74e3a2 .bg-image-wrapper::after {
    background: linear-gradient(0deg, rgba(var(--primary-dark-color), .7) 0%, rgba(var(--primary-dark-color), .25) 45%, rgba(var(--primary-dark-color), 0) 70%),
        linear-gradient(90deg, rgba(var(--primary-dark-color), .92) 0%, rgba(var(--primary-dark-color), .7) 50%, rgba(var(--black-color), .35) 100%);
}
.hero .test-andring { position: relative; z-index: 3; }
/* Avstånd mellan delar på dator: 7,2 rem över och under (förut 10 rem) – ca 144 px mellan delarna i stället för 200.
   Toppbilderna behåller sin höjd. Surfplatta och mobil var redan lagom. */
@media (min-width: 981px) {
    .section-wrapper:not(.hero):not(.top-section) { padding-top: 7.2rem; padding-bottom: 7.2rem; }
}
/* Annonssidornas toppfält (och 404): levande lila nyanser i stället för en enda färg.
   Mjuka ljusfläckar i olika lila toner glider långsamt – stilla vid minskade animationer. */
.hero.bg-primary { position: relative; overflow: hidden; isolation: isolate; background: #3e1960 !important; }
.hero.bg-primary::before {
    content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 45% at 20% 30%, rgba(150, 90, 210, .85), transparent 70%),
        radial-gradient(32% 40% at 78% 25%, rgba(91, 42, 134, .9), transparent 70%),
        radial-gradient(40% 50% at 65% 80%, rgba(186, 130, 240, .6), transparent 70%),
        radial-gradient(35% 45% at 15% 85%, rgba(44, 16, 72, .9), transparent 70%),
        radial-gradient(25% 30% at 88% 70%, rgba(244, 197, 66, .18), transparent 70%),
        linear-gradient(120deg, #2c1048 0%, #3e1960 45%, #5b2a86 100%);
    filter: blur(20px);
    animation: lila-sken 16s ease-in-out infinite alternate;
}
@keyframes lila-sken {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%  { transform: translate(6%, -4%) rotate(8deg) scale(1.08); }
    66%  { transform: translate(-5%, 5%) rotate(-6deg) scale(1.04); }
    100% { transform: translate(4%, 3%) rotate(4deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .hero.bg-primary::before { animation: none; } }
/* Bakgrundsordet ska synas helt: ligger inom toppbilden; långa ord krymps av main.js så de får plats */
.bg-text, .bg-text.smaller { right: var(--gutter); bottom: .6rem; }
@media (max-width: 980px) { .bg-text, .bg-text.smaller { bottom: .4rem; } }
/* Svagare bakgrundsord: lägre ton och lätt oskärpa så det anas mer än syns */
.bg-text { color: rgba(var(--white-color), var(--bg-ord, .05)) !important; filter: blur(1.5px); }

/* Toppbilder: den platta lila tonen över fotot blir levande lila nyanser som glider långsamt.
   Vänster sida är mörkast så rubrik och ingress förblir lätta att läsa. Startsidans video påverkas inte. */
.hero.bg-image .bg-image-wrapper::after {
    background:
        radial-gradient(35% 50% at 25% 30%, rgba(150, 90, 210, .45), transparent 70%),
        radial-gradient(30% 45% at 78% 25%, rgba(91, 42, 134, .55), transparent 70%),
        radial-gradient(40% 55% at 65% 85%, rgba(186, 130, 240, .35), transparent 70%),
        radial-gradient(25% 35% at 90% 70%, rgba(244, 197, 66, .1), transparent 70%),
        linear-gradient(90deg, rgba(var(--primary-dark-color), .9) 0%, rgba(var(--primary-dark-color), .62) 50%, rgba(var(--black-color), .3) 100%);
    background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 100% 100%;
    animation: lila-flyt 18s ease-in-out infinite alternate;
}
.section-fb74e3a2.hero.bg-image .bg-image-wrapper::after {
    background:
        radial-gradient(35% 50% at 25% 30%, rgba(150, 90, 210, .45), transparent 70%),
        radial-gradient(30% 45% at 78% 25%, rgba(91, 42, 134, .55), transparent 70%),
        radial-gradient(40% 55% at 65% 85%, rgba(186, 130, 240, .35), transparent 70%),
        radial-gradient(25% 35% at 90% 70%, rgba(244, 197, 66, .1), transparent 70%),
        linear-gradient(0deg, rgba(var(--primary-dark-color), .7) 0%, rgba(var(--primary-dark-color), .25) 45%, rgba(var(--primary-dark-color), 0) 70%),
        linear-gradient(90deg, rgba(var(--primary-dark-color), .9) 0%, rgba(var(--primary-dark-color), .62) 50%, rgba(var(--black-color), .3) 100%);
    background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 100% 100%, 100% 100%;
}
@keyframes lila-flyt { 0% { background-position: 0% 0%; } 50% { background-position: 100% 55%; } 100% { background-position: 35% 100%; } }
@media (max-width: 980px) {
    .hero.bg-image .bg-image-wrapper::after, .section-fb74e3a2.hero.bg-image .bg-image-wrapper::after {
        background:
            radial-gradient(45% 40% at 25% 25%, rgba(150, 90, 210, .4), transparent 70%),
            radial-gradient(45% 40% at 75% 80%, rgba(186, 130, 240, .3), transparent 70%),
            linear-gradient(180deg, rgba(var(--primary-dark-color), .88), rgba(var(--primary-dark-color), .72));
        background-size: 220% 220%, 220% 220%, 100% 100%;
    }
}
@media (prefers-reduced-motion: reduce) { .hero.bg-image .bg-image-wrapper::after { animation: none; } }
/* Tjänstesidornas toppbild: lätt suddigt foto (skärpedjup) så bildens egen text – siffror, kod,
   diagramtext – inte krockar med rubriken och bakgrundsordet. Lätt inzoomat så kanterna inte blir mjuka. */
.svc-hero .bg-image-wrapper img { filter: blur(3px) saturate(.9); scale: 1.06; }
@media (max-width: 767px) { .svc-hero .bg-image-wrapper img { filter: blur(2px) saturate(.9); } }
/* Den vita glöden runt rutor ska alltid ligga under innehållet. Rutor som tonas in (data-aos) ritas annars
   efter sina grannar, och glöden kunde lägga sig över t.ex. en knapp och ge den en ljus ton. */
.section-wrapper:not(.hero):not(.top-section) .block-object > * { position: relative; z-index: 1; }
.section-wrapper:not(.hero):not(.top-section) .block-object > :is(.text-block.mb-2, .why-box, .guide, .lage-text, .sjalva, .split-wrapper.intro-split, .plats-kort, .svc-intro, .artikel, .policy-box, .cards-wrapper, .faq-list, .steps-flow, .role-grid, .om-tva, .princip-grid, .svc-cols, .kontakt-vagval, .ContactForm, .svc-cta, .sjalva-banner) { z-index: 0; }