/* =========================================================
   Växjö Värmepump & VVS — custom.css
   ENDAST sådant Bootstrap 5.3 inte har.
   Allt annat löses med utility-klasser i markup.
   ========================================================= */
html {
    scroll-behavior: smooth;
}

/* Kompensera för .sticky-top vid ankarhopp */
[id] {
    scroll-margin-top: 7rem;
}

/* Scroll-reveal förskjuter element i sidled innan de rullas in, och nära en
   brytpunkt kan den förskjutningen sticka ut utanför containern och ge
   sidoscroll. overflow-x: clip kapar det utan att skapa en egen
   scroll-container — sticky-top i navbaren fortsätter alltså fungera.
   (Bootstrap har .overflow-x-hidden, men hidden skapar scroll-container
   och skulle döda sticky-top. Därför en egen regel.) */
main,
footer {
    overflow-x: clip;
}

/* --- Hero med INBAKAD övertoning ---
   Bakgrundsfärgen är övertoningens täta ände, samplad ur bildfilen.
   Textytan håller AA-kontrast mot vit text fram till ca 42 % av
   bildbredden — håll rubrik och ingress innanför det. --- */
.hero-baked {
    background-color: #003e43;
}

/* Under xl visas hela motivet med object-fit-contain (klass i markup —
   Bootstraps sizing-utilities är !important och kan inte överskuggas här).
   Bilden fästs i överkant och dess nedre kant är exakt sektionens
   bakgrundsfärg, så heron kan bli hur hög som helst utan synlig skarv.
   Motivet slutar vid 33.7vw och ytan blir helt jämn vid 35.5vw —
   därav toppytan nedan. Bildens totala höjd är 43.7vw.
   Brytpunkten är xl, inte lg: mellan 992 och 1199 px blir heron så hög
   att cover zoomar bort övertoningen och texten hamnar över ansiktena.
   Toppytan läggs som padding på .hero-body — håll pt-* borta från den
   under xl i markup, Bootstraps spacing-utilities är !important. */
@media (max-width: 1199.98px) {
    .hero-baked {
        background-color: #003e45;
    }

    .hero-baked picture img {
        object-position: top center;
    }

    .hero-baked .hero-body {
        padding-top: 45vw;
    }
}

/* Från xl ligger texten över bilden. Övertoningen sitter på fast plats i
   bilden, men texten följer den centrerade containern — på en bred skärm
   skulle texten därför glida ut över det ljusa partiet. Bildytan börjar
   därför vid containerns vänsterkant (minus en gutter); ytan till vänster
   är sektionens bakgrundsfärg, som är exakt övertoningens täta ände.
   Bilden förankras dessutom en fjärdedel åt vänster: när cover zoomar
   kapas då mest av högerkanten, inte övertoningen bakom texten. */
@media (min-width: 1200px) {
    .hero-baked picture {
        position: absolute;
        inset: 0 0 0 max(0px, calc(50% - 570px - 1.5rem));
    }

    .hero-baked picture img {
        object-position: 25% center;
    }
}

@media (min-width: 1400px) {
    .hero-baked picture {
        left: max(0px, calc(50% - 660px - 1.5rem));
    }
}

/* --- Hero-scrim: mörk gradient över foto (för sidor UTAN inbakad
   övertoning — lägg klassen hero-scrim på sektionen) --- */
.hero-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(97deg,
      rgba(4, 51, 58, .94) 0%,
      rgba(4, 51, 58, .86) 27%,
      rgba(4, 51, 58, .42) 48%,
      rgba(4, 51, 58, .06) 66%);
}

@media (max-width: 991.98px) {
    .hero-scrim::after {
        background: linear-gradient(180deg,
        rgba(4, 51, 58, .42) 0%,
        rgba(4, 51, 58, .78) 44%,
        rgba(4, 51, 58, .96) 100%);
    }
}

/* --- Minirubrik (eyebrow) ---
   Sätter storlek, versaler, teckenmellanrum och vikt.
   INTE färg — den väljer du med Bootstraps .text-*-klasser
   direkt i Pinegrow (.text-primary, .text-info, .text-white ...). */
.eyebrow {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.eyebrow-lg {
    font-size: .95rem;
}

.eyebrow-sm {
    font-size: .72rem;
}

/* --- Turkos text som klarar WCAG AA (4.5:1) ---
   Märkesturkosen #0099a8 ger bara 3.4:1 mot vitt, 3.1:1 mot sanden och
   2.8:1 mot den ljusturkosa omdömesytan. Den får vara kvar på ikoner,
   linjer och stora rubriker (där räcker 3:1), men liten text och knappar
   får en egen nyans:
   - ljus bakgrund: #00707c, temats egen länkfärg (5.8:1 mot vitt,
     4.75:1 mot omdömesytan)
   - mörk bakgrund (.bg-dark, t.ex. sidfoten): #2bb6c3 (5.6:1 mot #04333a)
   Bytet sker via Bootstraps --bs-primary-rgb på själva elementet, så
   .text-primary fungerar som vanligt i Pinegrow. */
.eyebrow,
.text-primary:is(.small, .fw-semibold, dt) {
    --bs-primary-rgb: 0, 112, 124;
}

/* Ljusa kort inuti en mörk sektion (t.ex. prisrutan på startsidan) undantas */
.bg-dark :is(.eyebrow, .text-primary:is(.small, .fw-semibold, dt)):not(:is(.card, .bg-white, .bg-body, .bg-light) *) {
    --bs-primary-rgb: 43, 182, 195;
}

/* Vit text på turkos knapp: samma mörkare nyans, hover/aktiv ännu mörkare */
.btn-primary {
    --bs-btn-bg: #00707c;
    --bs-btn-border-color: #00707c;
    --bs-btn-hover-bg: #005f69;
    --bs-btn-hover-border-color: #005f69;
    --bs-btn-active-bg: #00535c;
    --bs-btn-active-border-color: #00535c;
    --bs-btn-disabled-bg: #00707c;
    --bs-btn-disabled-border-color: #00707c;
}

.btn-outline-primary {
    --bs-btn-hover-bg: #00707c;
    --bs-btn-hover-border-color: #00707c;
    --bs-btn-active-bg: #005f69;
    --bs-btn-active-border-color: #005f69;
}

/* --- Ingress (.lead) ---
   Bootstraps 1.25rem är rätt på desktop men för stort i en smal
   mobilspalt. Bootstrap har ingen variabel för .lead, därför en regel. */
@media (max-width: 575.98px) {
    .lead {
        font-size: 1.125rem;
    }
}

/* --- Brödsmulor ---
   Avdelaren (›) sätts i theme.css. Här justeras bara dess höjd så att den
   linjerar med texten, och en variant för mörka hero-ytor. */
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    transform: translateY(-.06em);
}

.breadcrumb-mork {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5);
    --bs-breadcrumb-item-active-color: #fff;
}

.breadcrumb-mork a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .2s ease-in-out;
}

.breadcrumb-mork a:hover,
.breadcrumb-mork a:focus-visible {
    color: #fff;
}

/* --- Jämförelsetabell ---
   Scrollar i sidled på smala skärmar (table-responsive i markup). Första
   kolumnen är låst, så man alltid ser vilken egenskap raden gäller. */
.jamfor-tabell table {
    min-width: 40rem;
}

.jamfor-tabell th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* Hörncellen i tabellhuvudet låses också, annars scrollar den bort */
.jamfor-tabell thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--bs-light);
}

.jamfor-tabell th,
.jamfor-tabell td {
    padding: .875rem 1rem;
}

/* Pumptypen i kolumnhuvudet: ikon ovanför namnet, länk till typens sida */
.jamfor-typ {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    color: var(--bs-heading-color);
    text-decoration: none;
}

.jamfor-typ iconify-icon {
    font-size: 2rem;
    color: var(--bs-primary);
    transition: transform .2s ease;
}

.jamfor-typ span {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .25s ease, color .2s ease;
}

.jamfor-typ:hover,
.jamfor-typ:focus-visible {
    color: var(--bs-link-color);
}

.jamfor-typ:hover span,
.jamfor-typ:focus-visible span {
    background-size: 100% 1px;
}

.jamfor-typ:hover iconify-icon,
.jamfor-typ:focus-visible iconify-icon {
    transform: translateY(-2px);
}

/* --- Hårfin regel i varumärkesfärg --- */
.rule-primary {
    height: 1px;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, rgba(0, 153, 168, .55), rgba(0, 153, 168, 0));
}

/* --- Flerradig text-clamp (.text-truncate är enradig) --- */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Öppet-nu-indikator ---
   Styrs av js/iyp-oppettider.js. Grön och pulserande när det är öppet,
   grön och stilla strax före öppning, grå när det är stängt. Jourpricken
   vid telefonnumret är bärnstensgul och pulserar.
   display sätts här och inte med .d-inline-block i markup — Bootstraps
   utility är !important och skulle annars slå ut attributet hidden. */
.live-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #5fd0a0;
    animation: live-pulse 2.4s ease-in-out infinite;
}

.live-dot-snart {
    animation: none;
}

.live-dot-stangd {
    background: rgba(255, 255, 255, .45);
    animation: none;
}

.live-dot-jour {
    background: #f5c04e;
}

/* På turkos topprad (öppet) syns den gröna pricken dåligt mot bakgrunden
   (ca 1,8:1) — en tunn vit ring lyfter fram den. */
[data-oppet-kalla].bg-primary .live-dot:not(.live-dot-stangd) {
    box-shadow: 0 0 0 2px #fff;
}

/* Turkos topprad: samma mörkare nyans som knapparna, annars klarar den
   vita och sandfärgade texten inte AA (3.4:1 resp. 3.1:1 mot #0099a8) */
[data-oppet-kalla].bg-primary {
    --bs-primary-rgb: 0, 112, 124;
}

/* Telefonikonen i mobilnaven syns bara under ordinarie öppettider
   (hidden sätts av iyp-oppettider.js). Flex här och inte med
   .d-inline-flex, av samma skäl som ovan. */
[data-oppet-ring] {
    display: inline-flex;
    align-items: center;
}

@keyframes live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.75);
    }
}

/* --- Vågsymbolen som vattenmärke i mörka sektioner --- */
.watermark-wave {
    position: absolute;
    right: -5rem;
    bottom: -4rem;
    width: 46rem;
    max-width: 70%;
    opacity: .07;
    pointer-events: none;
}

/* =========================================================
   RÖRELSE — hover och scroll
   Attributnamnen följer IYP-Motion-Library (data-deluxe).
   Hover är ren CSS och kostar noll JS.
   Scroll drivs av js/iyp-motion.js (~1 kB) tills biblioteket
   är produktionsklart — då byts skriptet ut, inte markupen.
   ========================================================= */
/* Hover: lyft */
[data-deluxe="hover-lift"] {
    transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              box-shadow .28s cubic-bezier(.2, .7, .3, 1),
              background-color .28s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}

[data-deluxe="hover-lift"]:hover,
[data-deluxe="hover-lift"]:focus-within {
    transform: translateY(-.375rem);
    box-shadow: 0 1.25rem 2.5rem rgba(4, 51, 58, .16);
}

/* Kort är 60 % vita i vila (theme.css) och blir helvita när de lyfts */
.card[data-deluxe="hover-lift"]:hover,
.card[data-deluxe="hover-lift"]:focus-within {
    --bs-card-bg: #fff;
}

/* Täckande variant för kort som ligger över en mörk yta — t.ex. snabbvalen
   som glider upp över heron. Samma nyans som 60 % vitt ger på sidans botten
   (#f6f4f1), så de ser likadana ut som övriga kort där de ligger på ljust.
   Hover-regeln ovan har högre specificitet och gör dem ändå helvita. */
.card-solid {
    --bs-card-bg: #fbfbf9;
}

/* Hover: bildzoom */
[data-deluxe="hover-zoom"] {
    overflow: hidden;
}

[data-deluxe="hover-zoom"] img {
    display: block;
    width: 100%;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}

[data-deluxe="hover-zoom"]:hover img,
[data-deluxe="hover-zoom"]:focus-within img {
    transform: scale(1.045);
}

/* Hover: understruken länk som växer fram */
[data-deluxe="hover-underline"] {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .3s cubic-bezier(.2, .7, .3, 1);
}

[data-deluxe="hover-underline"]:hover,
[data-deluxe="hover-underline"]:focus {
    background-size: 100% 1px;
}

/* Hover: logotyp tonar upp */
[data-deluxe="hover-fade"] {
    opacity: .72;
    transition: opacity .3s cubic-bezier(.2, .7, .3, 1);
}

[data-deluxe="hover-fade"]:hover {
    opacity: 1;
}

/* Hover: pil som glider */
[data-deluxe="hover-arrow"] .arrow {
    display: inline-block;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

[data-deluxe="hover-arrow"]:hover .arrow,
[data-deluxe="hover-arrow"]:focus .arrow,
[data-deluxe="hover-lift"]:hover [data-deluxe="hover-arrow"] .arrow,
[data-deluxe="hover-lift"]:focus-visible [data-deluxe="hover-arrow"] .arrow {
    transform: translateX(.25rem);
}

/* --- Ikoner som lever vid hover ---
   Samma gest överallt: en diskret förstoring och en knapp vridning, som
   om ikonen vänder sig mot besökaren. Kort får lite mer än knappar,
   eftersom ytan är större. Gäller kort med hover-lift, alla knappar och
   ikonerna i navigeringens undermenyer. */
.card[data-deluxe="hover-lift"] iconify-icon,
.btn iconify-icon {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.card[data-deluxe="hover-lift"]:hover iconify-icon,
.card[data-deluxe="hover-lift"]:focus-within iconify-icon {
    transform: scale(1.14) rotate(-6deg);
}

.btn:hover iconify-icon,
.btn:focus-visible iconify-icon {
    transform: scale(1.1) rotate(-6deg);
}

/* --- Accordion ---
   Samma gest, men spegelvänd: ikonen vrider sig åt andra hållet. En stängd
   rad får dessutom en knappt synlig ton av teal, så att hela raden känns
   klickbar. Öppna rader behåller sin ljusteala bakgrund. */
.accordion-button iconify-icon {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.accordion-button:hover iconify-icon,
.accordion-button:focus-visible iconify-icon {
    transform: scale(1.12) rotate(6deg);
}

.accordion-button.collapsed:hover {
    background-color: rgba(0, 153, 168, .05);
}

/* --- Knappar utan ikon ---
   Färgskiftet ensamt blir för svagt på en knapp som "Läs villkor och
   teckna". De lyfter sig i stället lite, med en mjuk skugga i
   varumärkets mörka teal, och trycks ned igen vid klick. */
.btn {
    transition: color .15s ease-in-out, background-color .2s ease-in-out,
                border-color .2s ease-in-out,
                box-shadow .3s cubic-bezier(.2, .7, .3, 1),
                transform .3s cubic-bezier(.2, .7, .3, 1);
}

.btn:not(.btn-link):not(:has(iconify-icon)):hover {
    transform: translateY(-2px);
    box-shadow: 0 .625rem 1.25rem -.375rem rgba(4, 51, 58, .45);
}

.btn:not(.btn-link):not(:has(iconify-icon)):active {
    transform: translateY(0);
    box-shadow: 0 .25rem .5rem -.25rem rgba(4, 51, 58, .4);
}

/* Scroll-reveal: startläge sätts av JS (klassen .deluxe-armed),
   så innehållet är synligt även utan JavaScript. */
.deluxe-armed[data-deluxe="fade-up"] {
    opacity: 0;
    transform: translateY(1.25rem);
}

.deluxe-armed[data-deluxe="fade-left"] {
    opacity: 0;
    transform: translateX(-1.25rem);
}

.deluxe-armed[data-deluxe="fade-right"] {
    opacity: 0;
    transform: translateX(1.25rem);
}

.deluxe-armed[data-deluxe="fade"] {
    opacity: 0;
}

/* Under lg är layouten enkolumnig — en sidledes förflyttning ger då bara
   sidoscroll medan elementet väntar på att scrollas in, utan att tillföra
   något visuellt. Byt till samma lyft som fade-up. */
@media (max-width: 991.98px) {

    .deluxe-armed[data-deluxe="fade-left"],
    .deluxe-armed[data-deluxe="fade-right"] {
        transform: translateY(1.25rem);
    }
}

.deluxe-armed[data-deluxe="blur-in"] {
    opacity: 0;
    filter: blur(6px);
}

.deluxe-armed[data-deluxe^="stagger"] > [data-deluxe-item] {
    opacity: 0;
    transform: translateY(1rem);
}

.deluxe-armed[data-deluxe],
.deluxe-armed[data-deluxe] > [data-deluxe-item] {
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              transform .7s cubic-bezier(.2, .7, .3, 1),
              filter .7s cubic-bezier(.2, .7, .3, 1);
}

.deluxe-in[data-deluxe],
.deluxe-in[data-deluxe] > [data-deluxe-item] {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-deluxe],
    [data-deluxe] * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .deluxe-armed[data-deluxe],
    .deluxe-armed[data-deluxe] > [data-deluxe-item] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* =========================================================
   LOGORAD — plattor i fast format
   Enda som behövs är måtten; bakgrund, ram, radie, centrering och
   luft sköts av Bootstraps utility-klasser i markup. Bilderna har
   .w-100 .h-100 .object-fit-contain, så en bred logotyp fyller
   bredden och en kvadratisk fyller höjden — alla får samma
   optiska tyngd utan att beskäras.
   ========================================================= */
.logo-platta {
    width: 11rem;
    height: 6.5rem;
}

/* Bilden tar den höjd som blir över när en eventuell textrad har fått sitt.
   min-height: 0 behövs för att ett flex-barn ska få krympa under sin
   naturliga höjd — utan den spränger bilden plattan. */
.logo-platta-bild {
    flex: 1 1 auto;
    min-height: 0;
}

/* Förtydligande rad under en logotyp, t.ex. certifikatets kategori. */
.logo-platta-text {
    font-size: .6875rem;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
}

@media (max-width: 575.98px) {
    .logo-platta {
        width: 9rem;
        height: 5.5rem;
    }
}

/* Plattorna är små — hover-lift i sitt normalläge ger en skugga som blir
   för tung här. Kortare lyft och mjukare skugga. */
.logo-platta[data-deluxe="hover-lift"]:hover,
.logo-platta[data-deluxe="hover-lift"]:focus-visible {
    transform: translateY(-.25rem);
    box-shadow: 0 .625rem 1.25rem rgba(4, 51, 58, .11);
}


/* =========================================================
   DROPDOWN-MENYER — ikon till vänster om varje val
   Ikonen ligger i en fast kolumn så att texterna radar upp sig
   exakt, oavsett hur bred ikonen råkar vara. Färg och storlek
   ärvs, så du styr dem med Bootstraps .text-*- och .fs-klasser.

   .dropdown-item-pro är valet för BRF, industri och fastighet.
   Det ligger sist i varje meny med en tunn linje ovanför och en
   svagt tonad bakgrund, så att det skiljer sig från privatvalen
   utan att skrika.
   ========================================================= */
.dropdown-ikon {
    flex: 0 0 1.375rem;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
    color: var(--bs-primary);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.dropdown-item:hover .dropdown-ikon,
.dropdown-item:focus .dropdown-ikon {
    transform: scale(1.14) rotate(-6deg);
}

.dropdown-item-pro {
    margin-top: .5rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(4, 51, 58, .045);
    font-size: .9375rem;
}

.dropdown-item-pro .dropdown-ikon {
    color: var(--bs-dark);
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-ikon,
    .card iconify-icon,
    .btn iconify-icon,
    .accordion-button iconify-icon,
    .btn {
        transition: none;
    }

    /* Samma selektorer som hover-reglerna, så att specificiteten räcker */
    .dropdown-item:hover .dropdown-ikon,
    .dropdown-item:focus .dropdown-ikon,
    .card[data-deluxe="hover-lift"]:hover iconify-icon,
    .card[data-deluxe="hover-lift"]:focus-within iconify-icon,
    .btn:hover iconify-icon,
    .btn:focus-visible iconify-icon,
    .accordion-button:hover iconify-icon,
    .accordion-button:focus-visible iconify-icon,
    .btn:not(.btn-link):not(:has(iconify-icon)):hover,
    .btn:not(.btn-link):not(:has(iconify-icon)):active {
        transform: none;
    }
}


/* =========================================================
   NAVBAR-TOGGLER — egen grafik, ingen Bootstrap-ikon
   Tre streck i samma ojämna rytm som vågsymbolen i logotypen.
   Hover/fokus jämnar ut strecken, öppet läge viker ihop dem
   till ett kryss. Färgen ärvs med currentColor, så du styr den
   med Bootstraps .text-*-klasser direkt i Pinegrow.
   ========================================================= */
.iyp-toggler {
    --tgl-w: 1.625rem;
    --tgl-h: .1563rem;
    --tgl-gap: .4375rem;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--tgl-gap);
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 .5625rem;
    color: var(--bs-primary);
}

.iyp-toggler span {
    display: block;
    height: var(--tgl-h);
    width: var(--tgl-w);
    border-radius: var(--tgl-h);
    background-color: currentColor;
    transition: width .4s cubic-bezier(.2, .7, .3, 1),
                transform .4s cubic-bezier(.2, .7, .3, 1),
                opacity .2s linear;
}

/* Ojämn rytm som ekar logotypens vågstreck */
.iyp-toggler span:nth-child(2) {
    width: calc(var(--tgl-w) * .62);
}

.iyp-toggler span:nth-child(3) {
    width: calc(var(--tgl-w) * .82);
}

/* Hover och tangentbordsfokus: strecken jämnar ut sig */
.iyp-toggler:hover span,
.iyp-toggler:focus-visible span {
    width: var(--tgl-w);
}

.iyp-toggler:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
    border-radius: .25rem;
}

/* Öppet läge: strecken viker ihop sig till ett kryss */
.iyp-toggler[aria-expanded="true"] span {
    width: var(--tgl-w);
}

.iyp-toggler[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(calc(var(--tgl-gap) + var(--tgl-h))) rotate(45deg);
}

.iyp-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.2);
}

.iyp-toggler[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(calc((var(--tgl-gap) + var(--tgl-h)) * -1)) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .iyp-toggler span {
        transition: none;
    }
}

/* =========================================================
   Sidfot: hovereffekt och ikoner
   Bara CSS, ingen ny markup i Pinegrow-komponenten vvsfooter.
   Tjänstelänkarna får en ikon via CSS-mask (samma ikoner som i
   menyn), vald efter länkens href. Vid hover glider länken lite åt
   höger, blir ljust turkos och får en understrykning som växer
   fram från vänster. Kontaktlänkarna har redan ikoner i markupen.
   ========================================================= */
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) {
    --fot-hover: #7fd8e0;
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a,
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="gdprpolicy.html"] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none !important;
    transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}

/* Understrykningen ritas under texten, inte under ikonen */
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a::after,
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="gdprpolicy.html"]::after {
    content: "";
    position: absolute;
    left: var(--fot-understruk-start, 0);
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a,
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="gdprpolicy.html"] {
    position: relative;
}

/* Ikon via mask; länkar med egen iconify-ikon hoppar över den.
   Länkar utan egen ikon nedan får en pil. */
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a:not(:has(iconify-icon))::before,
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="gdprpolicy.html"]::before {
    content: "";
    flex: 0 0 1.15em;
    width: 1.15em;
    height: 1.15em;
    background-color: var(--bs-primary);
    -webkit-mask: var(--fot-ikon, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z%22/%3E%3C/svg%3E")) center / contain no-repeat;
    mask: var(--fot-ikon, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z%22/%3E%3C/svg%3E")) center / contain no-repeat;
    transition: background-color .2s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a:not(:has(iconify-icon)),
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="gdprpolicy.html"] {
    --fot-understruk-start: 1.75em;
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a:has(iconify-icon) {
    --fot-understruk-start: 1.6em;
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a iconify-icon {
    transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"]):is(:hover, :focus-visible) {
    color: var(--fot-hover) !important;
    transform: translateX(4px);
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"]):is(:hover, :focus-visible)::after {
    transform: scaleX(1);
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"]):is(:hover, :focus-visible)::before,
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) ul a:is(:hover, :focus-visible) iconify-icon {
    background-color: var(--fot-hover);
    color: var(--fot-hover) !important;
    transform: scale(1.12);
}

/* Sociala knappar: fylls turkost vid hover */
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) .btn-outline-light {
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-border-color: rgba(255, 255, 255, .35);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transition: background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) .btn-outline-light:is(:hover, :focus-visible) {
    box-shadow: 0 .5rem 1.25rem rgba(0, 153, 168, .35);
}

@media (prefers-reduced-motion: reduce) {
    :is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"], .btn-outline-light),
    :is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"])::before,
    :is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"])::after {
        transition: none;
    }
    :is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) :is(ul a, a[href="gdprpolicy.html"]):is(:hover, :focus-visible) {
        transform: none;
    }
}

/* Ikonerna per länk (SVG från Iconify, samma som i menyn) */
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="varmepump-vaxjo.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M19 8a2 2 0 0 1 2 2v6.76c.61.55 1 1.35 1 2.24c0 1.66-1.34 3-3 3s-3-1.34-3-3c0-.89.39-1.69 1-2.24V10c0-1.1.9-2 2-2m0 1c-.55 0-1 .45-1 1v1h2v-1c0-.55-.45-1-1-1M5 20v-8H2l10-9l4.4 3.96A3.97 3.97 0 0 0 15 10v6c-.63.83-1 1.87-1 3l.1 1z%22/%3E%3C/svg%3E"); }
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="service-varmepump-vaxjo.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 36%22%3E%3Cpath fill=%22currentColor%22 d=%22M33.18 26.11L20.35 13.28A9.28 9.28 0 0 0 7.54 2.79l-1.34.59l5.38 5.38l-2.82 2.83l-5.38-5.38l-.59 1.33a9.27 9.27 0 0 0 10.49 12.81l12.83 12.83a2 2 0 0 0 2.83 0l4.24-4.24a2 2 0 0 0 0-2.83m-5.66 5.66L13.88 18.12l-.57.16a7.27 7.27 0 0 1-9.31-7a7.2 7.2 0 0 1 .15-1.48l4.61 4.61l5.66-5.66l-4.61-4.6a7.27 7.27 0 0 1 8.47 9.16l-.16.57l13.65 13.65Z%22 class=%22clr-i-outline clr-i-outline-path-1%22/%3E%3Ccircle cx=%2227.13%22 cy=%2227.09%22 r=%221.3%22 fill=%22currentColor%22 class=%22clr-i-outline clr-i-outline-path-2%22 transform=%22rotate(-45 27.132 27.092)%22/%3E%3Cpath fill=%22none%22 d=%22M0 0h36v36H0z%22/%3E%3C/svg%3E"); }
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="kyla-ac-vaxjo.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M22 11h-4.17l3.24-3.24l-1.41-1.42L15 11h-2V9l4.66-4.66l-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93L6.34 4.34L11 9v2H9L4.34 6.34L2.93 7.76L6.17 11H2v2h4.17l-3.24 3.24l1.41 1.42L9 13h2v2l-4.66 4.66l1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24l1.42-1.41L13 15v-2h2l4.66 4.66l1.41-1.42L17.83 13H22z%22/%3E%3C/svg%3E"); }
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="vvs-vaxjo.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 50%22%3E%3Cpath fill=%22currentColor%22 d=%22M45.971 44.396c0-1.994-3.638-7.567-3.638-7.567s-3.693 5.573-3.693 7.567c0 1.99 1.642 3.604 3.666 3.604s3.665-1.614 3.665-3.604M19.666 13.171h-7.331V5.944h1.999V2H1v3.944h2v11.17c0 2.904 2.388 5.257 5.333 5.257h11.333v1.972h4.001V11.201h-4.001zm27.332 16.428v-11.17c0-2.903-2.387-5.257-5.329-5.257H30.334v-1.97h-4.001v13.143h4.001v-1.973h7.332v7.227h-1.997v3.944H49v-3.944z%22/%3E%3C/svg%3E"); }
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="vattenfilter-vaxjo.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M18.08 7a1 1 0 0 0-1.08.92l-.35 4.55a2.67 2.67 0 0 1-1.2-.77a1 1 0 0 0-1.5 0a2.65 2.65 0 0 1-3.9 0a1 1 0 0 0-1.5 0a2.7 2.7 0 0 1-1.2.77L7 7.92A1 1 0 0 0 5.92 7A1 1 0 0 0 5 8.08l.86 11.15a3 3 0 0 0 3 2.77h6.3a3 3 0 0 0 3-2.77L19 8.08A1 1 0 0 0 18.08 7m-1.94 12.08a1 1 0 0 1-1 .92H8.85a1 1 0 0 1-1-.92L7.5 14.5a4.8 4.8 0 0 0 1.8-.79a4.66 4.66 0 0 0 5.4 0a4.8 4.8 0 0 0 1.8.79ZM12 10a3.26 3.26 0 0 0 3.25-3.25c0-2.75-2.58-4.51-2.69-4.58a1 1 0 0 0-1.12 0c-.11.08-2.69 1.83-2.69 4.58A3.26 3.26 0 0 0 12 10m0-5.7a3.6 3.6 0 0 1 1.25 2.45a1.25 1.25 0 0 1-2.5 0A3.66 3.66 0 0 1 12 4.3%22/%3E%3C/svg%3E"); }
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="batterilagring-vaxjo.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M15 9h1V7.5h4V9h1c.55 0 1 .45 1 1v11c0 .55-.45 1-1 1h-6c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1m1 2v3h4v-3zm-4-5.31l-5 4.5V18h5v2H5v-8H2l10-9l2.78 2.5H14v1.67l-.24.1z%22/%3E%3C/svg%3E"); }
:is(footer[data-pgc="vvsfooter"], footer[data-pgc-define="vvsfooter"]) a[href="gdprpolicy.html"] { --fot-ikon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22currentColor%22 d=%22M21 11c0 5.55-3.84 10.74-9 12c-5.16-1.26-9-6.45-9-12V5l9-4l9 4zm-9 10c3.75-1 7-5.46 7-9.78V6.3l-7-3.12L5 6.3v4.92C5 15.54 8.25 20 12 21m2.8-10V9.5C14.8 8.1 13.4 7 12 7S9.2 8.1 9.2 9.5V11c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3m-1.3 0h-3V9.5c0-.8.7-1.3 1.5-1.3s1.5.5 1.5 1.3z%22/%3E%3C/svg%3E"); }

/* =========================================================
   Popover på bilder (js/iyp-popover.js)
   Rubrik i turkos med vit text, brödtext mörk mot vitt. Knappen
   täcker hela bilden. Nere till vänster syns bara en glödande rund
   symbol; den är ankare för popovern och fälls ut till en etikett
   (namn och roll) vid hover eller tryck.
   ========================================================= */
.iyp-pop {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.iyp-pop:focus-visible {
    outline: 3px solid var(--bs-info);
    outline-offset: -3px;
}

/* Kortet nere till vänster: från start bara den runda symbolen, som
   glöder. Vid hover eller när popovern är öppen fälls etiketten ut. */
.iyp-pop-chip {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    display: inline-flex;
    align-items: center;
    padding: .3rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.iyp-pop-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-size: 1.25rem;
    animation: iyp-pop-glod 2.4s ease-in-out infinite;
}

@keyframes iyp-pop-glod {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75), 0 0 .75rem .15rem rgba(0, 153, 168, .6); }
    70% { box-shadow: 0 0 0 .9rem rgba(255, 255, 255, 0), 0 0 1.5rem .4rem rgba(0, 153, 168, .35); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 .75rem .15rem rgba(0, 153, 168, .6); }
}

.iyp-pop-etikett {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transition: max-width .4s cubic-bezier(.2, .7, .3, 1), opacity .25s ease, padding .4s cubic-bezier(.2, .7, .3, 1);
}

.iyp-pop:is(:hover, :focus-visible, [aria-expanded="true"]) .iyp-pop-chip {
    background: var(--bs-primary);
    box-shadow: 0 .5rem 1.5rem rgba(4, 51, 58, .3);
}

.iyp-pop:is(:hover, :focus-visible, [aria-expanded="true"]) .iyp-pop-symbol {
    animation: none;
    background: #fff;
    border-color: #fff;
    color: var(--bs-primary);
}

.iyp-pop:is(:hover, :focus-visible, [aria-expanded="true"]) .iyp-pop-etikett {
    max-width: 20rem;
    opacity: 1;
    padding: 0 .9rem 0 .7rem;
    transition-delay: 0s, .1s, 0s;
}

/* Själva popovern */
.iyp-popover {
    --bs-popover-max-width: min(20rem, calc(100vw - 24px));
    --bs-popover-border-color: transparent;
    --bs-popover-border-radius: .75rem;
    --bs-popover-inner-border-radius: .75rem;
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: #fff;
    --bs-popover-header-padding-x: 1.1rem;
    --bs-popover-header-padding-y: .8rem;
    --bs-popover-body-padding-x: 1.1rem;
    --bs-popover-body-padding-y: 1rem;
    --bs-popover-body-color: var(--bs-body-color);
    --bs-popover-bg: #fff;
    --bs-popover-arrow-border: transparent;
    box-shadow: 0 1.25rem 3rem rgba(4, 51, 58, .28);
}

.iyp-popover .popover-header {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 0;
}

.iyp-popover .popover-body p:last-child {
    margin-bottom: .75rem;
}

.iyp-popover .popover-body a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    text-decoration: none;
}

.iyp-popover .popover-body a:hover {
    text-decoration: underline;
}

/* Pilen får rubrikens färg när popovern ligger under ankaret */
.iyp-popover.bs-popover-bottom > .popover-arrow::after,
.iyp-popover.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--bs-primary);
}

.iyp-popover .popover-header::before {
    display: none;
}

.iyp-popover.show > * {
    animation: iyp-popover-in .22s cubic-bezier(.2, .7, .3, 1);
}

@keyframes iyp-popover-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .iyp-pop-symbol,
    .iyp-popover.show > * {
        animation: none;
    }
    .iyp-pop-chip,
    .iyp-pop-etikett {
        transition: none;
    }
}

/* =========================================================
   Expanderande bildpaneler (js/iyp-panels.js), kontaktsidan
   Dator: panelerna står bredvid varandra och den aktiva växer.
   Stängda paneler visar namnet stående. Mobil: staplade, och den
   aktiva öppnas på höjden. Bilden måste fylla en yta vars form
   ändras medan panelen växer, så här används object-fit: cover
   (undantag från regeln om förbeskurna bilder). Fokuspunkten
   sätts per bild med object-position.
   ========================================================= */
.iyp-panels {
    --panel-hojd: 28rem;
    --panel-stangd: 5.5rem;
    --panel-ease: cubic-bezier(.65, 0, .25, 1);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.iyp-panel {
    position: relative;
    overflow: hidden;
    height: var(--panel-stangd);
    border-radius: 1rem;
    background: var(--bs-dark);
    box-shadow: 0 .75rem 2rem rgba(4, 51, 58, .18);
    transition: height .6s var(--panel-ease), flex-grow .6s var(--panel-ease), box-shadow .3s ease;
}

.iyp-panel.is-active {
    height: var(--panel-hojd);
}

.iyp-panel-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--fokus-mobil, var(--fokus, 50% 50%));
    transform: scale(1.06);
    transition: transform .9s var(--panel-ease), filter .4s ease, bottom .6s var(--panel-ease);
    filter: saturate(.85);
}

/* Mobil: i öppen panel tar bilden den övre delen och texten ligger
   under mot mörk botten, så att den inte hamnar över ansiktet */
@media (max-width: 991.98px) {
    .iyp-panel.is-active .iyp-panel-bild {
        bottom: var(--panel-textyta, 12.5rem);
        height: auto;
    }
}

.iyp-panel.is-active .iyp-panel-bild {
    transform: scale(1);
    filter: none;
}

/* Mörk ton: hela ytan när panelen är stängd, bara nedtill när den är öppen */
.iyp-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(4, 51, 58, .92) 0%, rgba(4, 51, 58, .55) 38%, rgba(4, 51, 58, 0) 65%),
        rgba(4, 51, 58, .45);
    transition: background-color .5s ease;
    pointer-events: none;
}

.iyp-panel.is-active::after {
    background:
        linear-gradient(to top, rgba(4, 51, 58, .92) 0%, rgba(4, 51, 58, .55) 38%, rgba(4, 51, 58, 0) 65%),
        rgba(4, 51, 58, 0);
}

.iyp-panel:not(.is-active):hover::after {
    background:
        linear-gradient(to top, rgba(4, 51, 58, .92) 0%, rgba(4, 51, 58, .55) 38%, rgba(4, 51, 58, 0) 65%),
        rgba(4, 51, 58, .25);
}

/* Knappen täcker den stängda panelen och bär namnet */
.iyp-panel-knapp {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.iyp-panel-knapp:focus-visible {
    outline: 3px solid var(--bs-info);
    outline-offset: -3px;
    border-radius: 1rem;
}

.iyp-panel.is-active .iyp-panel-knapp {
    pointer-events: none;
}

.iyp-panel-namn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    transition: opacity .3s ease;
}

.iyp-panel-namn::after {
    content: "";
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .7;
}

.iyp-panel.is-active .iyp-panel-namn {
    opacity: 0;
}

.iyp-panel-innehall {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 1.5rem;
    color: #fff;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.iyp-panel.is-active .iyp-panel-innehall {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .45s ease .35s, transform .45s var(--panel-ease) .35s;
}

/* Egen mörk botten bakom texten, utöver panelens ton. Den följer med
   texten in och ut (samma opacity-övergång), så stängda paneler och
   bilden ovanför texten påverkas inte. */
.iyp-panel-innehall {
    padding-top: 3rem;
    background: linear-gradient(to top, rgba(4, 51, 58, .7) 0%, rgba(4, 51, 58, .5) 60%, rgba(4, 51, 58, 0) 100%);
}

.iyp-panel-innehall a {
    color: #fff;
}

@media (min-width: 992px) {
    .iyp-panels {
        flex-direction: row;
        height: var(--panel-hojd);
        gap: 1rem;
    }

    .iyp-panel {
        height: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .iyp-panel.is-active {
        height: auto;
        flex-grow: 3.2;
    }

    .iyp-panel-bild {
        object-position: var(--fokus, 50% 50%);
    }

    /* Namnet står upp i stängda paneler */
    .iyp-panel-knapp {
        align-items: flex-end;
        justify-content: center;
        padding: 1.5rem 0;
    }

    .iyp-panel-namn {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 1.5rem;
    }

    .iyp-panel-namn::after {
        transform: rotate(-45deg) translate(-2px, -2px);
    }

    .iyp-panel-innehall {
        padding: 4rem 2rem 2rem;
        min-width: 22rem;
    }

    .iyp-panel:not(.is-active):hover {
        box-shadow: 0 1rem 2.5rem rgba(4, 51, 58, .28);
    }
}

/* xl: den aktiva panelen är 667 px bred. 34rem (544 px) visar hela
   bildens höjd; sidorna beskärs några procent enligt --fokus. */
@media (min-width: 1200px) {
    .iyp-panels {
        --panel-hojd: 34rem;
    }
}

/* xxl: den aktiva panelen är 778 px bred. 36rem (576 px) visar 96 % av
   bildens höjd (780×600) i stället för 75 % vid 28rem — inget ansikte
   hamnar under texten. Bilderna räcker utan uppskalning. */
@media (min-width: 1400px) {
    .iyp-panels {
        --panel-hojd: 36rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iyp-panel,
    .iyp-panel-bild,
    .iyp-panel::after,
    .iyp-panel-innehall,
    .iyp-panel.is-active .iyp-panel-innehall {
        transition: none;
    }
}

/* =========================================================
   Teamkorten på om oss (.team-kort)
   Tätare padding och mindre rubrik, så att smala kort (168 px vid
   lg) inte blir en lång pelare av avstavade ord. Under 576 px ligger
   korten ett per rad, liggande: porträttet till vänster fyller
   kortets höjd (object-fit här, eftersom kortets höjd följer
   texten), texten till höger.
   ========================================================= */
.team-kort .card-body {
    padding: 1rem;
}

.team-kort .card-body h3 {
    font-size: 1.15rem;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .team-kort .card-body {
        padding: .875rem;
    }
}

@media (max-width: 575.98px) {
    .team-kort .card {
        flex-direction: row;
    }

    .team-kort .card > img {
        flex: 0 0 38%;
        width: 38%;
        min-height: 100%;
        object-fit: cover;
        object-position: 50% 25%;
    }

    .team-kort .card-body {
        padding: .875rem 1rem;
    }

    .team-kort .card-body h3 {
        font-size: 1.1rem;
    }
}