/* =========================================================================
   design.css — VKAB startsida (Figma-facit)
   Laddas SIST i master-bundlen. Binder om starterkitets tokens och bär
   startsidans sektions- och typografiregler ur DESIGN.md + STYLE-CONTRACT.json.
   ========================================================================= */

/* --- Omkoppling av starterkitets tokens (DESIGN.md §1.1, obligatoriskt) --- */
:root {
    --primary-color: #003c70;
    --secondary-color: #0056a3;
    --text-dark: #1c1c1c;
    --accent-color: #0056a3;

    /* VKAB-palett */
    --vkab-white: #ffffff;
    --vkab-offwhite: #f8f8f8;
    --vkab-ink: #1c1c1c;
    --vkab-ink-soft: #2b2b2b;
    --vkab-accent: #e56000;
    --vkab-blue: #0056a3;
    --vkab-footer-bg: #003c70;
    --vkab-placeholder: #ebebeb;
    --vkab-muted: #666666;
    --vkab-caption: #666666;
    --vkab-alt: #666666;
    --vkab-heading: #2b2b2b;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--vkab-ink);
}
p, li { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; }

/* Centrerad innehållsbredd: 1600 = 1792 − 2×96 */
.vkab-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Breddtak: innehåll > 1792 px begränsas (facit är 1792 px) --- */
#main-content { max-width: 1792px; margin-inline: auto; }

/* ---------------------------------------------------------------- Knappar */
.vkab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: var(--vkab-ink);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
    cursor: pointer;
    white-space: nowrap;
}
.vkab-btn--light { background: var(--vkab-white); color: var(--vkab-ink); border: none; min-width: 177px; }
.vkab-btn--light:hover,
.vkab-btn--light:focus-visible { background: #e56000; color: #ffffff; outline: none; }
.vkab-btn--outline { background: transparent; border-color: var(--vkab-ink); color: var(--vkab-ink); }
.vkab-btn--outline:hover,
.vkab-btn--outline:focus-visible { background: #e56000; border-color: #e56000; color: #ffffff; outline: none; }
a.vkab-btn--outline,
a.vkab-btn--outline:link,
a.vkab-btn--outline:active { color: var(--vkab-ink); }
a.vkab-btn--outline:hover,
a.vkab-btn--outline:focus-visible { background: #e56000; border-color: #e56000; color: #ffffff; outline: none; }

/* --------------------------------------------------------------- Sidhuvud */
/* Global Header: vit opak rad, mörka länkar, flex-direction column per layout.json */
.navbar { padding: 0px max(96px, calc((100% - 1600px) / 2)); }
.navbar .container-x { height: 112px; justify-content: space-between; }
.vkab-logo-1 { width: 166px; height: 64px; display: block; }
.navbar.navbar-light {
    background: var(--vkab-white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}
.navbar.navbar-light .nav-link { color: var(--vkab-ink); }
.navbar #main-menu .nav-link,
.navbar #main-menu > .nav-item > .nav-link,
ul#main-menu .nav-item > .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--vkab-ink);
}

/* -------------------------------------------------------------------- Hero */
.vkab-hero {
    position: relative;
    width: 100%;
    min-height: 1025px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.vkab-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.vkab-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 19%, rgba(0,0,0,0) 100%);
}
.vkab-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1792px;
    margin: 0 auto;
    padding: 32px 96px 265px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.vkab-hero__frame {
    display: flex;
}
.vkab-hero .vkab-hero__frame {
    padding: 32px 0px;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    border-radius: 4px;
    max-width: 776px;
}
/* Certifieringar - heading frame (Frame 1321316212) */
.vkab-certs .vkab-inner > .vkab-hero__frame:not(.vkab-certs__logos) {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
/* Certifieringar - logos frame (Frame 1321316302) — overridden by .vkab-certs__logos below */
/* Sidfot - outer frame (Frame 1321316322) */
footer .vkab-hero__frame {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.vkab-hero__title {
    max-width: 776px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 62px;
    line-height: 68px;
    color: var(--vkab-white);
    font-weight: 700;
}
.vkab-hero__text {
    max-width: 776px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    line-height: 31px;
    color: var(--vkab-white);
}

/* ------------------------------------------------------------------- Intro */
.vkab-intro {
    background: var(--vkab-white);
    display: flex;
    flex-direction: row;
    gap: 48px;
    padding: 48px 96px;
    align-items: flex-start;
    border-radius: 4px;
}
.vkab-intro__heading {
    flex: 1 1 0;
    max-width: 776px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    line-height: 48px;
    color: var(--vkab-ink-soft);
    font-weight: 600;
}
.vkab-intro__text {
    flex: 1 1 0;
    max-width: 776px;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--vkab-ink);
}
.vkab-intro__text p { font-size: 20px; line-height: 28px; margin: 0 0 1em; }
.vkab-intro__text p:last-child { margin-bottom: 0; }
.vkab-intro__text p:empty { display: none; }

/* ---------------------------------------------------------- Tjänsteutbud */
.vkab-services { background: var(--vkab-offwhite); scroll-margin-top: 112px; padding: 96px 96px 112px; }
.vkab-services .vkab-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.vkab-services__header {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 147px;
}
.vkab-services__intro { max-width: 1230px; }
.vkab-services__heading {
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    line-height: 44px;
    color: var(--vkab-ink-soft);
    font-weight: 600;
}
.vkab-services__text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--vkab-ink);
}
.vkab-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.vkab-card {
    display: flex;
    flex-direction: column;
    background: var(--vkab-white);
    /* Grid-items har min-width:auto som standard - ett langt ord i rubriken
       (t.ex. "Bostadsrattsforeningar") tvingar annars sin kolumn bredare an
       de andras 1fr och gor gridden osymmetrisk. min-width:0 later texten
       radbrytas istallet for att spranga kolumnbredden. */
    min-width: 0;
}
.vkab-card__img {
    width: 100%;
    aspect-ratio: 382 / 255;
    object-fit: cover;
    display: block;
}
.vkab-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
    padding: 24px;
    align-items: flex-start;
}
.vkab-card__heading {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    line-height: 31px;
    color: var(--vkab-ink-soft);
    font-weight: 500;
    overflow-wrap: anywhere;
}
.vkab-card__text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 25px;
    color: #000000;
    max-width: none;
    align-self: stretch;
}
/* base.css satter "a, a:link, a:active" - :link har samma specificitet
   som en klass men vinner mot en ren klasselektor for att den ocksa
   traffar elementet a. Darfor mattas .vkab-card__link har mot a. */
a.vkab-card__link,
a.vkab-card__link:link,
a.vkab-card__link:visited {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: #e56000;
    text-decoration: none;
    margin-top: auto;
    white-space: nowrap;
}
a.vkab-card__link:hover,
a.vkab-card__link:focus-visible { text-decoration: underline; }

/* ----------------------------------------------------------------- Paneler */
.vkab-panels { background: var(--vkab-white); }
.vkab-panel {
    display: flex;
    align-items: center;
    max-width: 1792px;
    margin: 0 auto;
    padding: 112px 96px 0px;
}
.vkab-panel + .vkab-panel { padding-top: 0; padding-bottom: 112px; }
.vkab-panel__media { flex: 1 1 0; }
.vkab-panel__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.vkab-panel__body {
    flex: 1 1 0;
    background: var(--vkab-white);
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px;
    justify-content: center;
    align-items: flex-start;
}
.vkab-panel--reverse { flex-direction: row-reverse; padding: 0px 96px 112px; margin-top: 48px; }
.vkab-panel__heading {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    line-height: 44px;
    color: var(--vkab-ink);
    font-weight: 600;
}
.vkab-panel__text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 25px;
    color: var(--vkab-ink-soft);
}
.vkab-panel__text p { font-size: 18px; line-height: 25px; color: var(--vkab-ink-soft); margin: 0 0 1em; }
.vkab-panel__text p:last-child { margin-bottom: 0; }
/* Panel [0] (bild vänster) knappetikett i Poppins, panel [1] (reverse) i Inter — mätt i facit. */
.vkab-panel .vkab-btn { font-family: 'Poppins', sans-serif; }
.vkab-panel--reverse .vkab-btn { font-family: 'Inter', sans-serif; }
/* Panel outline button: border-radius 4px per facit (ej 32px) */
.vkab-panel .vkab-btn--outline { border-radius: 4px; padding: 20px 32px; gap: 10px; justify-content: center; align-items: center; }

/* ------------------------------------------------------------ Certifieringar */
.vkab-certs { background: var(--vkab-offwhite); }
.vkab-certs .vkab-inner {
    padding: 112px 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.vkab-certs__heading {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    line-height: 44px;
    color: var(--vkab-ink-soft);
    font-weight: 600;
    text-align: center;
}
.vkab-certs__logos {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.vkab-certs__logo { height: 112px; width: 112px; display: block; object-fit: contain; }

/* -------------------------------------------------------------------- CTA */
.vkab-cta { background: var(--vkab-white); scroll-margin-top: 112px; padding: 112px 0px; }
.vkab-cta__container {
    max-width: 1110px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 64px;
    align-items: center;
}
.vkab-cta__media { flex: 0 0 auto; }
.vkab-cta__media img {
    width: 360px;
    height: 360px;
    object-fit: cover;
    border-radius: 350px;
    background: var(--vkab-placeholder);
    display: block;
}
.vkab-cta__info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 0px;
    align-items: flex-start;
}
.vkab-cta__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vkab-cta__heading {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    line-height: 44px;
    color: var(--vkab-ink);
    font-weight: 600;
}
.vkab-cta__text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--vkab-ink);
}
.vkab-cta__details {
    padding: 0px 20px;
    border-top: 1px solid var(--vkab-blue);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vkab-cta__name {
    margin: 0;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 26px;
    line-height: 31px;
    color: var(--vkab-ink);
}
.vkab-cta__title,
.vkab-cta__phone,
.vkab-cta__email {
    margin: 0;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 22px;
    line-height: 29px;
    color: var(--vkab-ink);
}
.vkab-cta__phone a,
.vkab-cta__email a { color: inherit; text-decoration: none; }
.vkab-cta__phone a:hover,
.vkab-cta__email a:hover { text-decoration: underline; }
.vkab-cta__phone i,
.vkab-cta__email i {
    margin-right: 10px;
    color: var(--vkab-ink);
}

/* ----------------------------------------------------------------- Sidfot */
/* Facitets sidfot: mörkblå botten, off-white text (DESIGN.md §10). */
footer.container-y.vkab-footer {
    background: var(--vkab-footer-bg);
    color: var(--vkab-offwhite);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
    padding: 112px max(96px, calc((100% - 1600px) / 2));
}
.vkab-footer__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 34px;
}
/* H368: en SVG utan tydliga inneboende matt stretchar till hela bredden i en
   column-flex med standard align-items:stretch (.vkab-footer__inner) - width:auto
   racker inte for ett "replaced element" utan kant intrinsic ratio. Bredden
   satt explicit (samma forhallande som .vkab-logo-1 i headern, 166:64) och
   align-self forhindrar stretchen helt, oavsett SVG:ns egna matt. */
.vkab-footer__logo { height: 40px; width: 104px; object-fit: contain; align-self: flex-start; }
.vkab-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.vkab-footer__col {
    flex: 1 1 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Address and Contact Container: gap 1px (facit I76:302;11:901) */
.vkab-footer__cols > .vkab-footer__col:first-child { gap: 1px; }
/* Quick Links Container: padding 16px 0px, gap 16px (facit I76:302;11:915) */
.vkab-footer__cols > .vkab-footer__col:nth-child(2) { padding: 16px 0px; gap: 16px; align-items: flex-start; }
/* Services Container: padding 16px 0px, gap 16px (facit I76:302;11:922) */
.vkab-footer__cols > .vkab-footer__col:nth-child(3) { padding: 16px 0px; gap: 16px; align-items: flex-start; }
/* Headings in quick-links/services columns: gap handles spacing, remove margin-bottom */
.vkab-footer__cols > .vkab-footer__col:nth-child(2) h2,
.vkab-footer__cols > .vkab-footer__col:nth-child(3) h2,
.vkab-footer__cols > .vkab-footer__col:nth-child(2) a.vkab-footer__heading,
.vkab-footer__cols > .vkab-footer__col:nth-child(3) a.vkab-footer__heading { margin-bottom: 0; }
.vkab-footer h2,
.vkab-footer__heading {
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: var(--vkab-offwhite);
    font-weight: 600;
}
/* NOTE: placed AFTER .vkab-footer a to win the cascade (equal specificity, last wins) */
.vkab-footer p,
.vkab-footer address,
.vkab-footer li {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--vkab-offwhite);
    font-style: normal;
    align-self: stretch;
}
.vkab-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vkab-footer a { color: var(--vkab-offwhite); text-decoration: none; font-size: 16px; }
/* Footer column headings: .vkab-footer a.vkab-footer__heading (0,2,1) beats .vkab-footer a (0,1,1) */
footer a.vkab-footer__heading,
footer .vkab-footer__heading a,
.vkab-footer a.vkab-footer__heading { font-size: 20px; color: var(--vkab-offwhite); }
.vkab-footer a:hover,
.vkab-footer a:focus-visible { text-decoration: underline; }
.vkab-footer__contact-row a,
.vkab-cta__phone a { white-space: nowrap; }
.vkab-footer__social > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--vkab-offwhite);
    border-radius: 4px;
    font-size: 18px;
}
.vkab-footer__contact a { font-size: 16px; }
.vkab-footer__contact { margin-top: 0; }
.vkab-footer__contact-row { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.vkab-footer__divider { border: none; border-top: 1px solid var(--vkab-offwhite); margin: 0; }
.vkab-footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vkab-footer__bottom p,
.vkab-footer__bottom a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--vkab-offwhite);
    margin: 0;
}

/* -------------------------------------------------------------- Brödsmula */
.vkab-breadcrumb {
    background: var(--vkab-offwhite);
    display: flex;
    align-items: center;
    min-height: 48px;
    /* Navet ar position: fixed (112px) och hade taks over brodsmulan, som ligger
       forst i floedet pa varje undersida utan en full-bleed hero bakom navet. */
    margin-top: 112px;
}
@media (max-width: 767px) {
    .vkab-breadcrumb { margin-top: 72px; }
}
.vkab-breadcrumb .vkab-inner {
    padding: 0 96px;
    display: flex;
    align-items: center;
}
.vkab-breadcrumb__list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vkab-breadcrumb__item {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--vkab-muted);
}
.vkab-breadcrumb__item a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--vkab-muted);
    text-decoration: none;
}
.vkab-breadcrumb__item a:hover { color: #1c1c1c; }
.vkab-breadcrumb__item--active,
.vkab-breadcrumb__item--active a {
    color: var(--vkab-ink);
}
.vkab-breadcrumb__sep {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--vkab-muted);
    list-style: none;
}

/* --------------------------------------------------------- Projekthuvud */
.vkab-project {
    background: var(--vkab-white);
    display: flex;
    flex-direction: row;
    padding: 48px 96px 96px;
    align-items: flex-start;
    position: relative;
}
.vkab-project__frame {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 4px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}
.vkab-project__media {
    flex: 0 0 50%;
    position: relative;
    align-self: stretch;
    overflow: hidden;
}
.vkab-project__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 400px;
}
.vkab-project__caption {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: var(--vkab-caption);
    margin: 8px 0 0;
    padding: 0 8px;
}
.vkab-project__body {
    flex: 0 0 50%;
    background: var(--vkab-offwhite);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px;
    box-sizing: border-box;
    align-self: stretch;
}
.vkab-project__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    line-height: 62px;
    color: var(--vkab-ink);
}
.vkab-project__intro {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--vkab-ink);
}
.vkab-project__facts {
    list-style: none;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--vkab-accent);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vkab-project__fact {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 25px;
    color: var(--vkab-ink);
}
.vkab-project__deco {
    position: absolute;
    pointer-events: none;
}

/* --------------------------------------------------- Projektets bildspel */
.vkab-project__slideshow { position: relative; width: 100%; height: 100%; min-height: 400px; }
.vkab-project__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; z-index: 1; }
.vkab-project__slide--active { opacity: 1; z-index: 2; }
.vkab-project__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(28, 28, 28, .55); color: #ffffff; transition: background-color .15s ease;
}
.vkab-project__nav:hover, .vkab-project__nav:focus-visible { background: #e56000; outline: none; }
.vkab-project__nav--prev { left: 16px; }
.vkab-project__nav--next { right: 16px; }
.vkab-project__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.vkab-project__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255, 255, 255, .6); cursor: pointer; }
.vkab-project__dot--active { background: #e56000; }

/* ----------------------------------------------------------- Paginering */
.vkab-pagination {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}
.vkab-pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border: 1px solid var(--vkab-ink);
    color: var(--vkab-ink);
    text-decoration: none;
}
.vkab-pagination__arrow:hover { background: #e56000; color: #ffffff; }
.vkab-pagination__pages {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vkab-pagination__page a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1;
    color: var(--vkab-ink);
    text-decoration: none;
}
.vkab-pagination__page--active a {
    border: 1px solid var(--vkab-ink);
    font-weight: 600;
}

/* ----------------------------------------- Navlänkar — överstyr 1.125rem */
nav.navbar ul#main-menu .nav-link,
#mobileMenu ul .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--vkab-ink);
}
/* Remove navbar.css margin-left that doubles the gap between nav items */
nav.navbar ul#main-menu > .nav-item > .nav-link { margin-left: 0; margin-right: 0; }
/* Menu Container (76:341): padding 16px 0px, justify-content center per DESIGN.md §3.2 */
/* Navigation Menu (76:342): gap 30px between nav items */
@media (min-width: 992px) {
    #desktopMenu {
        display: flex;
        flex-direction: column;
        padding: 16px 0px;
        justify-content: center;
        align-items: flex-end;
    }
}
nav.navbar ul#main-menu { gap: 30px; }

/* Logo sizing: override navbar.css 280px desktop width to match facit 64px height */
.navbar .navbar-brand img.logo-light,
.navbar .navbar-brand img.logo-dark { height: 64px; width: auto; }
.navbar .navbar-brand img.vkab-logo-1 { width: 166px; height: 64px; }

/* ------------------------------------------------------------- Responsivt */
/* Navbar gap: 727px är facit vid 1792px — under det måttet nollställs gapet
   så att space-evenly fördelar utrymmet fritt och menyn ryms i viewporten. */
@media (max-width: 1791px) {
    .navbar .container-x { gap: 0; }
}

@media (max-width: 1200px) {
    .vkab-hero__content { padding: 0 48px 120px; }
    .vkab-hero__title { font-size: 48px; line-height: 54px; }
    .vkab-intro { padding: 48px; }
    .vkab-services { padding: 64px 48px 80px; }
    .vkab-services .vkab-inner { padding: 0; }
    .vkab-cards { grid-template-columns: repeat(2, 1fr); }
    .vkab-panel { padding: 64px 48px; }
    .vkab-panel + .vkab-panel { padding-bottom: 64px; }
    .vkab-certs .vkab-inner { padding: 80px 48px; }
}

@media (max-width: 768px) {
    .vkab-hero { min-height: 520px; }
    .vkab-hero__content { padding: 0 24px 64px; }
    .vkab-hero__title { font-size: 34px; line-height: 40px; }
    .vkab-hero__text { font-size: 18px; line-height: 24px; }
    .vkab-intro { flex-direction: column; gap: 24px; padding: 40px 24px; }
    .vkab-intro__heading { font-size: 28px; line-height: 34px; }
    .vkab-services { padding: 48px 24px; }
    .vkab-services .vkab-inner { padding: 0; }
    .vkab-services__heading { font-size: 28px; line-height: 34px; }
    .vkab-cards { grid-template-columns: 1fr; }
    .vkab-panel,
    .vkab-panel--reverse { flex-direction: column; padding: 40px 24px; gap: 24px; }
    .vkab-panel + .vkab-panel { padding-top: 0; }
    .vkab-panel__body { padding: 32px 0 0; }
    .vkab-panel__heading { font-size: 28px; line-height: 34px; }
    .vkab-certs .vkab-inner { padding: 48px 24px; }
    .vkab-certs__heading { font-size: 28px; line-height: 34px; }
    /* .vkab-project (artikelsidans hjaltesektion) hade INGEN mobilregel alls -
       flex-direction:row med tva fasta 50%-kolumner plus 96px sidopadding
       (desktop) tvingade sidan 516px bred pa en 375px telefon. Samma
       stapel-monster som .vkab-panel ovan. */
    .vkab-project { padding: 24px 0 0; }
    .vkab-project__frame { flex-direction: column; }
    .vkab-project__media,
    .vkab-project__body { flex: 1 1 auto; width: 100%; }
    .vkab-project__body { padding: 24px; gap: 16px; }
    .vkab-project__title { font-size: 32px; line-height: 38px; }
    .vkab-project__intro { font-size: 16px; line-height: 22px; }
    /* Rent dekorativa SVG-accenter med hardkodade desktop-pixelkoordinater
       (left/top i inline style) - overlappar/felplacerade pa mobil, aria-hidden. */
    .vkab-project__deco { display: none; }
    .vkab-cta__container { flex-direction: column; padding: 48px 24px; gap: 32px; text-align: left; }
    .vkab-cta__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .vkab-cta__heading { font-size: 28px; line-height: 34px; }
    .vkab-footer__inner { padding: 48px 24px 32px; }
    .vkab-footer__cols { gap: 24px; }
}

/* ------------------------------------------------------- Policy-rad i sidfot */
.vkab-footer__policy {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

/* Ensure footer headings and links render with correct color/size (override base cascade) */
.vkab-footer .vkab-footer__cols .vkab-footer__heading,
.vkab-footer .vkab-footer__inner .vkab-footer__col h2 {
    font-size: 20px;
    color: var(--vkab-offwhite);
}
.vkab-footer .vkab-footer__inner a,
.vkab-footer .vkab-footer__cols li a {
    font-size: 16px;
    color: var(--vkab-offwhite);
}
/* Footer heading links rendered as <a> must not be overridden to 16px by the rule above */
.vkab-footer .vkab-footer__inner a.vkab-footer__heading,
.vkab-footer .vkab-footer__cols .vkab-footer__col > a.vkab-footer__heading {
    font-size: 20px;
    color: var(--vkab-offwhite);
}

/* Hide language switcher on desktop — design shows exactly 4 nav links at 1792px */
@media (min-width: 992px) {
    #desktopMenu .navbar-language { display: none; }
}

/* ------------------------------------------ Mobil 375 px (max-width: 767px) */
@media (max-width: 767px) {
    /* Header: position absolute, height 72px (78:331) */
    .navbar { position: absolute !important; height: 72px; }
    .navbar .container-x { height: 72px; align-self: stretch; max-width: 335px; }

    /* Hero Content (78:340): flex 1 1 0, align-self stretch, padding 20px, justify-content flex-end */
    .vkab-hero__content {
        flex: 1 1 0;
        align-self: stretch;
        padding: 20px;
        justify-content: flex-end;
    }
    /* Frame in Hero (78:343): padding 8px 0px */
    .vkab-hero .vkab-hero__frame { padding: 8px 0px; }

    /* Intro (78:346): padding 48px 20px */
    .vkab-intro { padding: 48px 20px; }

    /* Services (78:349): padding 48px 20px */
    .vkab-services { padding: 48px 20px; }
    /* Services Header (78:350): align-self stretch, gap 12px, column */
    .vkab-services__header { align-self: stretch; gap: 12px; flex-direction: column; align-items: flex-start; }
    .vkab-services__header .vkab-btn--outline { align-self: stretch; }

    /* Card-List (80:615): horizontal carousel. Figma-facit mattes vid ramens
       375px (335px innehallsbredd), men 335px SATT SOM LITERAL fyllde bara
       exakt den bredden - varje telefon bredare an 375px (390/414/430px, dvs
       de flesta moderna iPhones) fick dod yta till hoger om karusellen.
       max-width: 100% later den fylla den FAKTISKA foraldrabredden istallet. */
    .vkab-cards {
        display: flex;
        flex-direction: row;
        max-width: 100%;
        gap: 20px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        grid-template-columns: unset;
        -webkit-overflow-scrolling: touch;
    }
    /* Service-Card (80:616/621): fixed width 280px, snap, stretch */
    .vkab-card { border-radius: 8px; flex: 0 0 280px; scroll-snap-align: start; align-self: stretch; min-width: 0; }
    /* Mobilramens korttypografi (78:349): rubrik 20px Inter, text 15/21 - inte desktopens 26px Poppins. */
    .vkab-card__heading { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 24px; overflow-wrap: anywhere; }
    .vkab-card__text { font-size: 15px; line-height: 21px; }
    /* Card-Image: cover, stretch */
    .vkab-card__img { object-fit: cover; align-self: stretch; width: 100%; }
    /* Card-Body (80:619): align-self stretch, padding 20px, gap 8px */
    .vkab-card__body { align-self: stretch; padding: 20px; gap: 8px; }

    /* .vkab-cards ateranvands pa TRE stallen: startsidans och "Fler
       projekt"-sektionens KURATERADE karuseller (4 kort, tanka som en
       horisontell scroll-rad), och "Vara projekt"-LISTNINGEN (8 kort per
       sida, en riktig sida - inte en karusell). Karusellregeln ovan traffar
       alla tre via samma klass; #vara-projekt skriver over den tillbaka till
       en riktig staplad lista, sa korten inte klipps av mitt i texten. */
    #vara-projekt .vkab-cards {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
        max-width: 100%;
        gap: 24px;
    }
    #vara-projekt .vkab-card { flex: initial; }

    /* Panel: no outer padding at mobile — image spans full width */
    .vkab-panel,
    .vkab-panel--reverse { padding: 0; gap: 0; }
    /* Panel media: full-width image, cover */
    .vkab-panel__media { width: 100%; }
    .vkab-panel__media img { object-fit: cover; align-self: stretch; width: 100%; }
    /* Panel body (78:379): padding 20px 16px, gap 16px */
    .vkab-panel__body { padding: 20px 16px; gap: 16px; }
    /* Panel 2 body (78:386): gap 14px */
    .vkab-panels .vkab-panel:nth-child(2) .vkab-panel__body { gap: 14px; }
    /* Panel inner frames: stretch */
    .vkab-panel__heading,
    .vkab-panel__text { align-self: stretch; }

    /* Certifications (78:391): align-self stretch, padding 64px 20px */
    .vkab-certs { align-self: stretch; padding: 64px 20px; }
    .vkab-certs .vkab-inner { padding: 0; }
    .vkab-certs__logo { object-fit: contain; }

    /* CTA Block (78:396): padding 48px 20px, gap 8px between Text-Group and Person-Card */
    .vkab-cta { padding: 48px 20px; }
    .vkab-cta__container { padding: 0; gap: 8px; }
    /* Text-Group (78:397): align-self stretch, gap 12px */
    .vkab-cta__content { align-self: stretch; gap: 12px; }
    /* Person-Card (78:400): border-radius 12px, align-self stretch, gap 24px, padding 24px, center */
    .vkab-cta__details {
        border-radius: 12px;
        align-self: stretch;
        gap: 24px;
        padding: 24px;
        align-items: center;
    }
    /* Profile Image (78:401): circular on mobile */
    .vkab-cta__media img { border-radius: 80px; object-fit: cover; }
    /* Frame 78:403 (name + title stack): gap 2px */
    .vkab-cta__name ~ .vkab-cta__title { margin-top: 2px; }
    /* Frame 78:406 contact info area: align-self stretch */
    .vkab-cta__phone, .vkab-cta__email { align-self: stretch; }
    /* LinkedIn social icon: max-width 36px on mobile */
    .vkab-footer__social > a { max-width: 36px; }

    /* Footer (78:413): padding 48px 20px */
    footer.container-y.vkab-footer { padding: 48px 20px; }
    .vkab-footer__inner { padding: 0; }

    /* Hero H1 line-height: 39px at mobile (78:341) */
    .vkab-hero__title { line-height: 39px; }

    /* Hero button: 13px/16px at mobile (I78:344;11:722) */
    .vkab-hero .vkab-btn { font-size: 13px; line-height: 16px; }

    /* Certifications heading: 24px at mobile (78:392) */
    .vkab-certs__heading { font-size: 24px; }

    /* CTA body text: 16px/24px at mobile (78:399) */
    .vkab-cta__text { font-size: 16px; line-height: 24px; }

    /* Footer address line-height: 23px at mobile (78:416) */
    .vkab-footer address { line-height: 23px; }

    /* Footer copyright: 13px at mobile (78:439) */
    .vkab-footer__bottom p { font-size: 13px; }

    /* Panel text-link button at mobile: "Text Link Btn" 18px/18px #e56000 (§3.3) */
    .vkab-panel .vkab-btn--outline {
        background: none;
        border: none;
        padding: 0;
        color: var(--vkab-accent);
        font-size: 18px;
        line-height: 18px;
        gap: 4px;
        min-width: 0;
    }

    /* Frame 78:419 (footer contact links): width fit-content on mobile */
    .vkab-footer__contact { width: fit-content; }
    /* Frame 78:428 (footer quick links list): width fit-content on mobile */
    .vkab-footer__cols > .vkab-footer__col:nth-child(2) ul,
    .vkab-footer__cols > .vkab-footer__col:nth-child(3) ul { width: fit-content; }
}

/* --------------------------------------------------------- Undersidor (H360) */
/* Samma .vkab-hero som startsidan, bara lagre — undersidorna har ingen 1025 px
   bild och breadcrumben ligger redan OVANFOR heron (se .vkab-breadcrumb). */
.vkab-hero--sub { min-height: 480px; }
.vkab-hero--solid { background: var(--vkab-blue); }
.vkab-hero--center { min-height: 720px; align-items: center; }
.vkab-hero--center .vkab-hero__content { padding: 0 96px; }
@media (max-width: 991px) {
    .vkab-hero--center { min-height: 480px; }
}
.vkab-hero--sub .vkab-hero__content { padding: 0 96px 80px; }
@media (max-width: 991px) {
    .vkab-hero--sub { min-height: 360px; }
}

/* Kontaktbox: fristaende kontaktperson utanfor CTA-sektionen (Additional
   content -> contactPerson). Samma fargtoken som CTA:ns detaljer, egen ram. */
.vkab-contact-box {
    border: 1px solid var(--vkab-blue);
    border-left: 4px solid var(--vkab-blue);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    max-width: 480px;
}
.vkab-contact-box__name { font-size: 20px; line-height: 1.3; color: var(--vkab-ink); font-weight: 600; margin: 0; }
.vkab-contact-box__title { font-size: 16px; line-height: 1.4; color: var(--vkab-muted); margin: 0; }
.vkab-contact-box__line { font-size: 16px; line-height: 1.4; color: var(--vkab-ink); margin: 0; }
.vkab-contact-box__line a { color: inherit; text-decoration: none; }
.vkab-contact-box__line a:hover { text-decoration: underline; }
.vkab-contact-box__line i { width: 18px; color: var(--vkab-muted); }

/* Kontaktkort-galler: FLERA contactPerson-block i rad (Kontaktpersoner/Ledning,
   H361). Samma typografi som kontaktboxen ovan, bara ett vagratt kort i stallet
   for den vertikala ramade boxen - annars dubblerad CSS for samma falt. */
.vkab-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}
.vkab-contacts-grid > * { min-width: 0; }
/* Klagomal 2026-09-24: "storre bilder" - kortet staplas lodratt och bilden fyller
   kortets bredd (1:1), i stallet for en 96px-cirkel bredvid texten. */
.vkab-contact-card {
    background: var(--vkab-white);
    box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.12);
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.vkab-contact-card__avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: repeating-linear-gradient(135deg, #ebebeb 0 10px, #e3e3e3 10px 20px);
    overflow: hidden;
}
.vkab-contact-card__body { padding: 0 24px; }
.vkab-contact-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vkab-contact-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.vkab-contact-card__body .vkab-contact-box__name,
.vkab-contact-card__body .vkab-contact-box__title,
.vkab-contact-card__body .vkab-contact-box__line { margin: 0; }

/* Informationsrutor: adress/faktura/kontakt/oppettider (Kontakt-sidan, H361) -
   samma rutstil som kontaktkorten men staplade, ingen egen bild. */
.vkab-info-grid { display: flex; flex-direction: column; gap: 1px; }
.vkab-info-box {
    border: 1px solid rgba(28, 28, 28, 0.15);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vkab-info-box__heading { font-size: 20px; line-height: 1; color: var(--vkab-ink); font-weight: 600; margin: 0; }
.vkab-info-box__text { font-size: 16px; line-height: 1.4; color: var(--vkab-ink); margin: 0; }
.vkab-info-box__text--muted { color: var(--vkab-muted); }

/* Formular: kontaktformulär + spontanansokan (H361) - samma faltstil pa bagge,
   staplas i .vkab-form. Skickar INGENSTANS an - visuell stomme, ingen backend. */
.vkab-form { display: flex; flex-direction: column; gap: 24px; }
.vkab-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.vkab-form label { display: flex; flex-direction: column; gap: 8px; }
.vkab-form label > span { font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; color: var(--vkab-muted); }
.vkab-form input, .vkab-form select, .vkab-form textarea {
    height: 56px;
    padding: 0 16px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    color: var(--vkab-ink);
    background: var(--vkab-white);
}
.vkab-form textarea { height: auto; padding: 16px; resize: vertical; }

/* Kartplaceringen (Kontakt-sidan) - samma diagonalmonster som bildplatshallarna
   i Claude Design, egen sektion (ingen bild finns att beskara). */
.vkab-map-placeholder {
    height: 480px;
    background: repeating-linear-gradient(135deg, #ebebeb 0 10px, #e3e3e3 10px 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
}

/* Visselblasning-callouten (Kontakt) - samma ramfarg som kontaktboxen, bredare. */
.vkab-callout {
    border: 1px solid var(--vkab-blue);
    border-left: 4px solid var(--vkab-blue);
    padding: 48px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vkab-callout__heading { font-size: 28px; line-height: 1.2; color: var(--vkab-ink); font-weight: 600; margin: 0 0 12px; }
.vkab-callout__text { font-size: 16px; line-height: 1.5; color: var(--vkab-ink); margin: 0; }

/* Historia/artal-tidslinjen (Om oss). */
.vkab-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.vkab-timeline__item { border-top: 4px solid rgba(0, 86, 163, 0.3); padding: 24px 24px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.vkab-timeline__item--first { border-top-color: var(--vkab-blue); }
.vkab-timeline__year { font-size: 34px; line-height: 1; color: var(--vkab-blue); font-weight: 800; }
.vkab-timeline__text { font-size: 16px; line-height: 1.5; color: var(--vkab-ink); }

/* Citat fran medarbetare (Jobba hos oss). */
.vkab-quote {
    background: var(--vkab-white);
    box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.12);
    padding: 64px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
}
.vkab-quote__avatar {
    width: 160px;
    height: 160px;
    border-radius: 350px;
    background: repeating-linear-gradient(135deg, #ebebeb 0 10px, #e3e3e3 10px 20px);
    flex-shrink: 0;
}
.vkab-quote__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.vkab-quote__text { font-family: 'Sofia Sans', Inter, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.35; color: #2b2b2b; }
.vkab-quote__name { font-size: 16px; line-height: 1.3; color: var(--vkab-ink); font-weight: 600; margin: 0; }
.vkab-quote__role { font-size: 16px; line-height: 1.3; color: var(--vkab-muted); margin: 0; }

/* Tom-lage for listor utan riktigt innehall an (lediga tjanster). Sa sidan
   aldrig hittar pa lediga tjanster som inte finns. */
.vkab-empty-state { padding: 48px 0; text-align: center; color: var(--vkab-muted); font-size: 16px; }

/* Block for Kontakt/Jobba hos oss (klagomalen 2026-09-24: inget hardkodat).
   Informationsrutorna bredvid kartan - samma 48px-rad som den hardkodade
   sektionen hade inline, nu som klass. */
.vkab-info-row { display: flex; flex-direction: row; gap: 48px; align-items: stretch; flex-wrap: wrap; }
.vkab-info-row > .vkab-info-grid { flex: 1 1 360px; min-width: 0; }
.vkab-info-row > .vkab-map { flex: 1 1 420px; min-width: 0; }
.vkab-map { position: relative; width: 100%; min-height: 360px; background: #ebebeb; }
.vkab-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vkab-quote__avatar { overflow: hidden; }
.vkab-quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vkab-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.vkab-jobs > * { min-width: 0; }
@media (max-width: 767px) {
    .vkab-info-row { gap: 24px; }
    .vkab-map { min-height: 280px; }
    .vkab-quote { padding: 32px; gap: 24px; }
    .vkab-quote__avatar { width: 112px; height: 112px; }
    .vkab-quote__text { font-size: 22px; }
    .vkab-callout { padding: 24px; gap: 24px; }
    .vkab-contacts-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .vkab-contact-card__body { padding: 0 12px; }
}

/* Rubrik/ingress-raden ur ett textImage-block utan bild: vansterstalld och i full
   bredd. .vkab-services__header ar byggd for rubrik+knapp (flex-end) - en ensam
   rubrik hamnade darfor omvaxlande till hoger och vanster beroende pa textens langd. */
.vkab-services__header--start { justify-content: flex-start; align-items: flex-start; }
.vkab-services__header--start .vkab-services__intro { width: 100%; }
.vkab-services__text p { font: inherit; color: inherit; margin: 0 0 12px; }
.vkab-services__text p:last-child { margin-bottom: 0; }

/* Kontaktkort som tjanstekort (operatoren 2026-09-24): samma kort, portrattbild. */
.vkab-card__img--portratt { aspect-ratio: 4 / 5; }
.vkab-card__img--tom { background: repeating-linear-gradient(135deg, #ebebeb 0 10px, #e3e3e3 10px 20px); }
.vkab-card--kontakt .vkab-contact-box__line { margin: 0; overflow-wrap: anywhere; }
/* Kontaktkortet har 2-4 rader i kroppen: space-between spred dem olika langt
   isar beroende pa antalet. Staplade uppifran med fast avstand i stallet. */
.vkab-card--kontakt .vkab-card__body { justify-content: flex-start; gap: 8px; }
.vkab-card--kontakt .vkab-card__text { color: var(--vkab-muted); font-size: 16px; line-height: 22px; }

/* TEXTLÄNKEN I MOBILVY (DESIGN.md §3.3 punkt 4, "Text Link Btn"): panelens knapp
   blir en textlänk - Inter 18/18 #e56000, ingen bakgrund, ingen kant, pil.
   Regeln vid rad ~1006 gällde aldrig: a.vkab-btn--outline:link (0,2,1) slår
   .vkab-panel .vkab-btn--outline (0,2,0), så länken blev mörk, i Poppins, och
   hover-regeln gav den en orange knappbakgrund vid tryck. Kvalificerad med
   elementet och varje länktillstånd här. Pilen finns i markupen, dold på desktop. */
.vkab-btn__pil { display: none; }
@media (max-width: 767px) {
    .vkab-panel a.vkab-btn--outline,
    .vkab-panel a.vkab-btn--outline:link,
    .vkab-panel a.vkab-btn--outline:visited,
    .vkab-panel a.vkab-btn--outline:active,
    .vkab-panel a.vkab-btn--outline:hover,
    .vkab-panel a.vkab-btn--outline:focus-visible {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        width: auto;
        align-self: flex-start;
        gap: 4px;
        color: var(--vkab-accent);
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        line-height: 18px;
        font-weight: 400;
        text-decoration: none;
    }
    .vkab-panel a.vkab-btn--outline:hover,
    .vkab-panel a.vkab-btn--outline:focus-visible { text-decoration: underline; }
    .vkab-panel .vkab-btn__pil { display: inline-block; font-size: 16px; }
}

/* --------------------------------------------------- Dropdown i toppmenyn
   Operatören 2026-09-24: "dropdownen är lite cp". Starterkitets standard flöt
   40px under länken - mitt i headern, 36px ovanför dess underkant - med tunn
   skugga och grå linjer, och öppnades bara via pilen (hover-regeln i navbar.css
   letar efter .main-link, som menyn inte har).
   Nu: menypunkten fyller headerns höjd (112px header, 40px meny -> 36px upp och
   ned), så panelen hänger i headerns underkant och hover-ytan har inget glapp. */
@media (min-width: 992px) {
    #main-menu > .nav-item.dropdown { position: relative; padding-block: 36px; margin-block: -36px; }
    #main-menu > .nav-item.dropdown:hover > .dropdown-menu,
    #main-menu > .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
    #main-menu > .nav-item.dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
}
#main-menu .dropdown-menu {
    top: 100%;
    left: -16px;
    margin: 0;
    min-width: 280px;
    padding: 8px 0;
    background: var(--vkab-white);
    border: none;
    border-top: 3px solid var(--vkab-blue);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 16px 40px rgba(28, 28, 28, 0.14);
}
#main-menu .dropdown-menu .nav-item,
#main-menu .dropdown-menu .nav-item > .dropdown-header { border-bottom: none; }
#main-menu .dropdown-menu a.nav-link,
#main-menu .dropdown-menu a.nav-link:link,
#main-menu .dropdown-menu a.nav-link:visited {
    display: block;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--vkab-ink);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#main-menu .dropdown-menu a.nav-link:hover,
#main-menu .dropdown-menu a.nav-link:focus-visible,
#main-menu .dropdown-menu .nav-item:hover a.nav-link {
    background: var(--vkab-offwhite);
    color: var(--vkab-blue);
}
#main-menu .dropdown-menu a.nav-link.active { color: var(--vkab-blue); font-weight: 600; }

/* Reservbild när en kontaktperson saknar foto: initialer på VKAB-blått i stället
   för den randiga platshållaren (som såg ut som en trasig bild i produktion). */
.vkab-initialer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vkab-blue);
    color: var(--vkab-white);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 64px;
    letter-spacing: 0.02em;
    user-select: none;
}
.vkab-initialer--cta { width: 360px; height: 360px; border-radius: 350px; font-size: 112px; }
@media (max-width: 767px) {
    .vkab-initialer { font-size: 48px; }
    .vkab-initialer--cta { width: 160px; height: 160px; font-size: 56px; margin: 0 auto; }
}
/* Initialerna nedtonade: helblått block tog över sidan. Ljus ton, blå text. */
.vkab-initialer { background: #e6eef7; color: var(--vkab-blue); font-weight: 600; font-size: 56px; }
.vkab-initialer--cta { font-size: 96px; }
@media (max-width: 767px) { .vkab-initialer { font-size: 40px; } .vkab-initialer--cta { font-size: 48px; } }

/* ORDNINGSOBEROENDE AVSTAND I ADDITIONAL CONTENT. Blocken kan sorteras fritt i
   backoffice, sa ingen sektion bar egen inline-padding langre. Avstandet satts av
   GRANNEN: tva ljusgra sektioner i rad delar ett mellanrum (den undre tappar sin
   topp), en rubrikrad (textBlock / textImage utan bild) hanger 48px ovanfor det
   den foljs av, och paneler i rad ar EN grupp med samma luft oavsett ordning. */
.vkab-services + .vkab-services { padding-top: 0; }
.vkab-services--rad:has(+ .vkab-services) { padding-bottom: 48px; }
@media (max-width: 1200px) { .vkab-services--rad:has(+ .vkab-services) { padding-bottom: 32px; } }
@media (max-width: 767px) { .vkab-services--rad:has(+ .vkab-services) { padding-bottom: 24px; } }

/* Panelgruppen: forsta panelens topp, glappet mellan panelerna och sista panelens
   botten hor till GRUPPEN, inte till panelens plats (forut gav en ensam eller
   omvand panel 0px mot nasta sektion). Samma matt som startsidans tva paneler. */
.vkab-panels { display: flex; flex-direction: column; gap: 48px; padding: 112px 0; }
.vkab-panels > .vkab-panel,
.vkab-panels > .vkab-panel + .vkab-panel { padding: 0 96px; margin-top: 0; }
@media (max-width: 1200px) {
    .vkab-panels { gap: 112px; padding: 64px 0; }
    .vkab-panels > .vkab-panel,
    .vkab-panels > .vkab-panel + .vkab-panel { padding: 0 48px; }
}
@media (max-width: 768px) {
    .vkab-panels { gap: 88px; padding: 40px 0 64px; }
    .vkab-panels > .vkab-panel,
    .vkab-panels > .vkab-panel + .vkab-panel { padding: 0 24px; }
}
@media (max-width: 767px) {
    .vkab-panels { gap: 48px; padding: 0 0 64px; }
    .vkab-panels > .vkab-panel,
    .vkab-panels > .vkab-panel + .vkab-panel { padding: 0; }
}

/* En ljusgra sektion fore en panelgrupp, CTA eller certifieringarna slutar 96px under
   innehallet (startsidans uppmatta Tjansteutbud -> Paneler), 48px pa mobil (grundmattet). */
section.vkab-services:has(+ .vkab-panels),
section.vkab-services:has(+ .vkab-cta),
section.vkab-services:has(+ .vkab-certs) { padding-bottom: 96px; }
@media (max-width: 767px) {
    section.vkab-services:has(+ .vkab-panels),
    section.vkab-services:has(+ .vkab-cta),
    section.vkab-services:has(+ .vkab-certs) { padding-bottom: 48px; }
}