/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* =========================================================
   HERO 2042 – Rörlig natthimmel + premium glow + 3D-carousel
   Ersätter alla tidigare regler för #hero-2042
   ========================================================= */

/* ---- Mobile first (>= 0rem) ---- */
@media (min-width: 0rem) {
  /* Sektionens grund */
  #hero-2042 {
    text-align: center;
    padding: clamp(12.5rem, 25.95vw, 18.75rem) 1rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-bottom: 18rem;

    /* Glow-position + carouselmått för overlay (kan justeras) */
    --caro-right: 5%;
    --caro-w: 520px;
    --caro-h: 400px;

    --glow-scale-x: 1.35;
    --glow-scale-y: 1.35;
    --glow-shift-x: 14%;
    --glow-rotate: 8deg;
    --glow-blur: 48px;
    --glow-op: 1;

    --glow-dur: 9s;
    --glow-pulse: 1.12;
  }

  /* Inre layout */
  #hero-2042 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    pointer-events: none;             /* allt inaktiverat som default… */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(7.5rem, 24vw, 29.0625rem);
    position: relative;
    margin-top: -5rem;
  }

  #hero-2042 .cs-content {
    text-align: center;
    width: 100%;
    max-width: 20.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* liten glassmorphism-kortkänsla */
    padding: 1.25rem 1.25rem 1.5rem;
  }

  #hero-2042 .cs-topper {
    color: #F8CD13;
    letter-spacing: .12em;
  }

  #hero-2042 .cs-title {
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    color: var(--bodyTextColorWhite);
    line-height: 1.2;
    margin: 0 0 0rem; /* justera avstånd under titeln här */
    font-weight: 700;
  }

  #hero-2042 .cs-text {
    margin-bottom: 2rem;
    color: var(--bodyTextColorWhite);
    font-size: large;
  }

  /* CTA-knapp */
  #hero-2042 .cs-button-group { display: flex; flex-wrap: wrap; gap: .5rem; }
  #hero-2042 .cs-button-solid {
    font-size: 1rem; font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    padding: 0 2rem; border-radius: .5rem;
    text-decoration: none; color: #000;
    background-color: var(--primary);
    box-shadow: #f8ce138d 0px 1px 10px;
    position: relative; z-index: 1;
    pointer-events: auto;              /* …men knappar aktiveras */
    border: 0.1px solid transparent;
  }
  #hero-2042 .cs-button-solid::before{
    content:""; position:absolute; inset:0 0 0 0; width:0%;
    background:#000; border-radius:0.5rem; z-index:-1;
    transition: width .3s;
  }
  #hero-2042 .cs-button-solid:hover{        
    color: var(--primary);
    border: var(--primary) 0.1px solid;
  }
  #hero-2042 .cs-button-solid:hover::before{ width:100%; }

  /* ---------- RÖRLIG BAKGRUND ---------- */

  /* Wrappern som bär canvasen + overlays */
  #hero-2042 .cs-video-wrapper{
    position:absolute; inset:0; z-index:-1;
    overflow:hidden;
    background:#05060a; /* djup natt */
  }

  /* Canvas täcker allt */
  #hero-2042 #cdl-stars{
    position:absolute; inset:0; width:100%; height:100%;
    display:block; pointer-events:none;
  }

  /* Vignette runt kanter för fokus */
  #hero-2042 .cs-video-wrapper::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(120% 85% at 50% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.68) 100%);
  }

  /* Overlaylager: vänster läsbarhet + premium glow bakom carousellen */
  #hero-2042 .hero-overlays{ position:absolute; inset:0; z-index:2; pointer-events:none; }

  /* Vänster sida toning (bättre läsbarhet) */
  #hero-2042 .hero-overlays::before{
    content:""; position:absolute; left:0; top:0; bottom:0;
    width:min(40vw, 640px);
    background: linear-gradient(90deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.38) 40%,
      rgba(0,0,0,0.10) 80%,
      rgba(0,0,0,0.00) 100%);
  }

  /* Glow bakom carousellen (synkas via CSS-variabler ovan) */
  #hero-2042 .hero-overlays::after{
    content:""; position:absolute; right:var(--caro-right); top:50%;
    width:calc(var(--caro-w) * var(--glow-scale-x));
    height:calc(var(--caro-h) * var(--glow-scale-y));
    transform: translate(var(--glow-shift-x), -50%) rotate(var(--glow-rotate));
    transform-origin:center;
    background: radial-gradient(closest-side,
      rgba(248,205,19,0.55) 0%,
      rgba(248,205,19,0.22) 45%,
      rgba(248,205,19,0.00) 80%);
    filter: blur(var(--glow-blur));
    opacity: var(--glow-op);
    animation: cdlGlow var(--glow-dur) ease-in-out infinite alternate;
  }

  @keyframes cdlGlow{
    0%{
      transform: translate(calc(var(--glow-shift-x) + 2%), -50%)
                 rotate(calc(var(--glow-rotate) - 3deg)) scale(1.15);
    }
    100%{
      transform: translate(calc(var(--glow-shift-x) - 2%), -50%)
                 rotate(calc(var(--glow-rotate) + 4deg)) scale(var(--glow-pulse));
    }
  }

  /* ---------- 3D CAROUSEL ---------- */

  /* Viktigt: tillåt klick på carousellen/knapparna */
  #hero-2042 .cs-container { position: relative; }
  #hero-2042 .cs-container .three-d-carousel,
  #hero-2042 .cs-container .three-d-carousel * { pointer-events: auto; }

  #hero-2042 .three-d-carousel{
    position:absolute; 
    right:5%; 
    top:50%;
    transform: translateY(-50%);
    width:520px; 
    height:400px;
    perspective:1400px;
    z-index:3; overflow:visible;
  }

  #hero-2042 .carousel{
    width:100%; height:100%;
    transform-style: preserve-3d;
    position:relative;
    transition: transform .8s ease;
    overflow:visible;
  }

  /* klickyta ovanpå front-bilden (uppdateras i JS) */
  #hero-2042 .front-link{
    position:absolute; top:15%; left:0; width:100%; height:70%;
    z-index:12; display:none; cursor:pointer; pointer-events:auto;
    border-radius:12px;
  }
  #hero-2042 .front-link:hover{
    box-shadow: 0 0 14px var(--primary);
    transition: box-shadow .7s ease;
  }

  /* Panels */
  #hero-2042 .screen{
    position:absolute; top:15%; left:0; width:100%; height:70%;
    border-radius:12px; transform-origin:center;
    overflow:hidden; background-color:transparent;
    box-shadow: 0 0 24px var(--secondary);
    backface-visibility:hidden; will-change: transform, opacity;
    transition: transform .45s ease, opacity .45s ease, filter .45s ease;
    opacity:.6; transform: scale(.85);
  }
  #hero-2042 .screen img{
    width:100%; height:100%; object-fit:contain; object-position:center;
    display:block; backface-visibility:hidden;
  }
  #hero-2042 .screen.is-front{
    opacity:1; transform: scale(1); z-index:10;
  }
  #hero-2042 .screen.is-front img{
    transition: transform .3s ease, box-shadow .3s ease;
  }
  #hero-2042 .screen.is-front:hover img{
    transform: scale(1.03);
    box-shadow: 0 0 28px var(--primary);
    cursor: pointer;
  }

  /* Pilar */
  #hero-2042 .carousel-btn{
    position:absolute; top:50%; transform: translateY(-50%);
    width:44px; height:44px; border-radius:999px;
    background: rgba(0,0,0,.50);
    color:#F8CD13; border:2px solid #F8CD13;
    display:grid; place-items:center; cursor:pointer;
    z-index:20;
    transition: background .25s, transform .15s, box-shadow .25s;
  }
  #hero-2042 .carousel-btn:hover,
  #hero-2042 .carousel-btn:focus-visible{
    background:#000000bd;
    box-shadow: var(--primary) 0 0 6px;
    outline:none;
  }
  #hero-2042 .carousel-btn:active{ transform: translateY(-50%) scale(.96); }
  #hero-2042 .carousel-btn.prev{ left:-66px; }
  #hero-2042 .carousel-btn.next{ right:-66px; }
}

/* ---- Tablet/Desktop (>= 48rem) ---- */
@media (min-width: 30rem){
  #hero-2042 .cs-container{
    padding-right: 6.25rem;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
  }
  #hero-2042 .cs-content{
    text-align: left;
    max-width: 35.25rem;
    align-items: flex-start;
  }
}

/* ---- Responsivt för mindre skärmar (carousel/glow) ---- */
@media (max-width: 729px){
  #hero-2042 .cs-container {
    transform: scale(0.6);
  }
}
@media (max-width: 820px){
  #hero-2042 .cs-container {
    transform: scale(0.9);
  }
    #hero-2042 .cs-text{
    max-width: 35ch;
  }
}
@media (max-width: 900px){ 
  #hero-2042 .cs-title{
    max-width: 25ch;
  }
  #hero-2042 .cs-text{
    max-width: 30ch;
  }
}

@media (max-width: 610px){
  #hero-2042 .three-d-carousel{
    display:none;
  }

  #hero-2042 .carousel-btn.prev,
  #hero-2042 .carousel-btn.next{ display:none; }

  #hero-2042 .cs-content {
    transform: scale(1.1);
  }


  
}
@media (min-width: 1150px) and (max-width: 1410px){

  #hero-2042 .carousel-btn.prev,
  #hero-2042 .carousel-btn.next{ display:none; }
}

@media (min-width: 1146px) and (max-width: 1300px){
  #hero-2042 .three-d-carousel{
    transform: scale(0.8);
    position: relative;
    right: -6.5%;
    
  }
}
/* ---- När fönstret är smalare än ~1150px ---- */
@media (max-width: 1150px) {

  /* Lägg om layouten: text överst, carousel under */
  #hero-2042 .cs-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding-right: 0;
  }

  /* Centrera och gör texten bredare */
  #hero-2042 .cs-content {
    text-align: center;
    align-items: center;
    max-width: 42rem;
    margin: 0 auto;
  }

  /* Flytta och skala karusellen under texten */
  #hero-2042 .three-d-carousel {
    position: relative;     /* bryt loss från absolute-positionen */
    right: auto;
    top: auto;
    transform: none;        /* ta bort translateY */
    width: min(90%, 520px);
    height: auto;
    margin: 2rem auto 0;
    perspective: 1000px;
  }

  /* Behåll proportionerna inuti */
  #hero-2042 .carousel {
    width: 100%;
    height: 400px;
  }

  /* Justera pilarna */
  #hero-2042 .carousel-btn.prev,
  #hero-2042 .carousel-btn.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,0.6);
    border: 2px solid var(--primary);
  }
  #hero-2042 .carousel-btn.prev { left: -56px; }
  #hero-2042 .carousel-btn.next { right: -56px; }

  /* Justera glowen bakom carousel på mindre yta */
  #hero-2042 .hero-overlays::after {
    --caro-w: 420px;
    --caro-h: 320px;
    --glow-scale-x: 1.15;
    --glow-scale-y: 1.15;
    --glow-shift-x: 0%;
  }
}
/* === FIX: perfect centering on small screens (iPhone SE etc.) === */
@media (max-width: 900px) {
  /* kill any earlier container scaling so we can center precisely */
  #hero-2042 .cs-container { transform: none ; }
}

@media (max-width: 610px) {
  /* keep layout column + centered */
  #hero-2042 .cs-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 0;
  }

  /* true centering + no overflow */
  #hero-2042 .cs-content {
    position: static;              /* ignore any previous offsets */
    right: auto ;        /* cancel that -6.5% rule */
    transform: none ;    /* remove the scale(1.1) that shifts it */
    box-sizing: border-box;
    width: 100%;
    max-width: 60ch;   /* always fits the viewport */
    margin: 0 auto;                /* center the block */
    padding-inline: 0.75rem;       /* prevent edge hugging on tiny screens */
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  /* optional: keep text readable without widening the block */
  #hero-2042 .cs-title { 
    max-width: 22ch; 
    margin-left: auto; 
    margin-right: auto; 
  }
  #hero-2042 .cs-text  { 
    max-width: 34ch; 
    margin-left: auto; 
    margin-right: auto; 
  }
  #hero-2042 {
    padding-bottom: 12rem; /* less bottom padding when carousel is gone */
  }
}
@media (min-width: 546px) and (max-width: 1070px) {
  #hero-2042 .cs-title{
    max-width: 19ch;
}
}

/*-- -------------------------- -->
<---       Side By Side  om.html      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
      @keyframes floatAnimation {
        0% {
            transform: translateY(1rem);
        }
        50% {
            transform: translateY(6rem);
        }
        100% {
            transform: translateY(1rem);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(-2rem);
        }
        50% {
            transform: translateY(4rem);
        }
        100% {
            transform: translateY(-2rem);
        }
    }
  #sbs-1014 {
    padding: var(--sectionPadding);
    background: linear-gradient(#040407 0.5%,#151515 16%, #060609 100%); 
  }
  #sbs-1014 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1014 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1014 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1014 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #sbs-1014 .cs-topper {
    color: var(--primary);
    letter-spacing: .12em;
  }
  #sbs-1014 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1014 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1014 .cs-quote {
    margin: 0 0 2rem 0;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background: rgba(255,255,255,0.03);
    border: 1px solid #21252E;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    border-radius: 1rem;
    position: relative;
  }
  #sbs-1014 .cs-quote-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #sbs-1014 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--primary);
    display: block;
  }
  #sbs-1014 .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #sbs-1014 .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
  #sbs-1014 .cs-image-group {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, .7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    position: relative;
    z-index: 10;
  }
  #sbs-1014 .cs-picture {
    position: absolute;
    display: block;
  }
  #sbs-1014 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs-1014 .cs-picture1 {
    width: 32.625em;
    height: 36.3125em;
    left: 0;
    top: 0;
    box-shadow: #fed31557 0px 0px 16px;
  }
  #sbs-1014 .cs-picture2 {
    width: 25.875em;
    height: 25em;
    background-color: #151515;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #111111;
    right: 0;
    bottom: 0;
  }
  #sbs-1014 .cs-bubbles1 {
        width: 26.1875rem;
        height: 26.6875rem;
        position: absolute;
        left: 2.25rem;
        top: 2rem;
        z-index: 0;
    }
    #sbs-1014 .cs-bubbles1:before {
        /* white border bubble */
        content: "";
        width: 16.625rem;
        height: 16.625rem;
        background: transparent;
        border: 1px solid var(--primary);
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 25rem;
        left: 0;
        animation-name: floatAnimation;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        box-shadow: inset var(--primary) 0px 0px 24px;
    }
    #sbs-1014 .cs-bubbles1:after {
        /* orange bubble */
        content: "";
        width: 12.25rem;
        height: 12.25rem;
        background: var(--primary);
        opacity: 0.4;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: -8rem;
        right: 2rem;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 18s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1014 .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbs-1014 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #sbs-1014 .cs-content {
    margin: 0;
  }
  #sbs-1014 .cs-bubbles1 {
        left: -8.125rem;
        top: -9.375rem;
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbs-1014 .cs-bubbles1 {
        margin-right: 40.625rem;
        left: auto;
        right: 50%;
    }
}
/* Förankra bubblorna i sektionen */
#sbs-1014 {
  position: relative;   /* NY: gör att .cs-bubbles1 positioneras mot sektionen */
}

/* Låt bubblorna ritas ovanför bakgrunden men inte fånga klick */
#sbs-1014 .cs-bubbles1 {
  z-index: 0;           /* ÄNDRA om den var -1 */
  pointer-events: none; /* NY: bubblorna är helt klick-igenom */
}
#sbs-1014 .cs-bubbles1{
  /* samma proportioner som innan men responsivt */
  width: clamp(18rem, 22vw, 26.1875rem);
  height: clamp(18.5rem, 23vw, 26.6875rem);
  left: max(-8vw, -16.25rem);
  top: clamp(-3rem, -12vw, -15rem);
}
@media screen and (max-width: 880px) {
  #sbs-1014 .cs-bubbles1{
  display: none;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2432 {
    padding: var(--sectionPadding);
    background-color: #060609;
    overflow: hidden;
  }
  #sbsr-2432 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 8vw, 5rem);
  }
  #sbsr-2432 .cs-content-group {
    /* changes to 522px at Desktop */
    max-width: 55.625rem;
    padding: clamp(1rem, 4vw, 2rem);
    padding-top: 14.75rem;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
  #sbsr-2432 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #sbsr-2432 .cs-background:before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #010104 0%, rgba(1, 1, 4, 0) 56%, #010104 100%);
    pointer-events: none;
  }
  #sbsr-2432 .cs-background:after {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 100%;
    background: linear-gradient(to right, #010104 0%, rgba(1, 1, 4, 0) 56%, #010104 100%);
    pointer-events: none;
  }
  #sbsr-2432 .cs-background img {
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2432 .cs-content {
    padding: clamp(1rem, 3vw, 1.5rem);
    box-sizing: border-box;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  #sbsr-2432 .cs-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 7, 17, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
    pointer-events: none;
  }
  #sbsr-2432 .cs-content > * {
    position: relative;
    z-index: 1;
  }
  #sbsr-2432 .cs-title,
  #sbsr-2432 .cs-text,
  #sbsr-2432 .cs-h3,
  #sbsr-2432 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #sbsr-2432 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-2432 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-2432 .cs-ul-wrapper {
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #sbsr-2432 .cs-ul-wrapper .cs-text:last-of-type {
    margin-bottom: clamp(3rem, 7vw, 4rem);
  }
  #sbsr-2432 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #sbsr-2432 .cs-item {
    list-style: none;
    padding: 0 0 clamp(1.5rem, 4vw, 2rem);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(1.5rem, 3.3vw, 3rem);
    /* remove the border and spacing on the last cs-item */
  }
  #sbsr-2432 .cs-item:last-of-type {
    margin: 0;
    padding: 0;
    border: none;
  }
  #sbsr-2432 .cs-icon-wrapper {
    width: 7rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
    z-index: 1;
  }
  #sbsr-2432 .cs-icon {
    width: 4rem;
    height: auto;
    margin: 0;
    display: block;
  }
  #sbsr-2432 .cs-flex {
    border-bottom: 1px solid #21252E;
  }
  #sbsr-2432 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: left;
    margin: 0 0 0.5rem 0;
  }
  #sbsr-2432 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin-bottom: 2rem;
  }
  #sbsr-2432 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #000;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    box-shadow: #f8ce138d 0px 1px 10px;
  }
  #sbsr-2432 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    border-radius: 0.5rem;
  }
  #sbsr-2432 .cs-button-solid:hover:before {
    width: 100%;  
  }
  #sbsr-2432 .cs-button-solid:hover {
    color: var(--primary);
    border: var(--primary) 1px solid;
    box-shadow: var(--primary) 0px 0px 8px;
  }
  #sbsr-2432 .cs-border {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2432 .cs-border:before {
    content: '';
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2432 .cs-border:after {
    content: '';
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  /* #sbsr-2432 .cs-border1 {*/
    /* top left border */
  /*} */
  #sbsr-2432 .cs-border1:before {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #fed315 0%, rgba(0, 0, 0, 0) 78%);
  }
  #sbsr-2432 .cs-border1:after {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, #fed315 0%, rgba(0, 0, 0, 0) 78%);
  }
  #sbsr-2432 .cs-border2:before {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 22%, #fed315 100%);
    top: auto;
    bottom: 0;
  }
  #sbsr-2432 .cs-border2:after {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, #fed315 100%);
    left: auto;
    right: 0;
  }
  #sbsr-2432 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: #F8CD13;
        letter-spacing: .12em;
        margin-bottom: 0.25rem;
        display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2432 .cs-content-group {
    width: 100%;
    padding-top: clamp(1rem, 4vw, 2rem);
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #sbsr-2432 .cs-content {
    width: 47vw;
    max-width: 30.625rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-2432 .cs-container {
    flex-direction: row;
    align-items: center;       /* centrera vertikalt */
    justify-content: center;   /* centrera horisontellt */
    gap: 3rem;                 /* lite luft mellan content och ul-wrapper */
  }

  #sbsr-2432 .cs-content-group {
    width: 47vw;
    max-width: 32.625rem;
    justify-content: center;   /* centrera innehållet */
    align-items: center;       /* centrera innehållet horisontellt */
    text-align: center;        /* centrera text */
    order: 2;
  }

  #sbsr-2432 .cs-content {
    width: 100%;
    max-width: 30.625rem;
    padding: 1.5rem;
    height: 100%;
    justify-content: center;   /* centrera vertikalt */
    align-items: center;       /* centrera horisontellt */
    gap: 2rem;
    text-align: center;
  }

  #sbsr-2432 .cs-ul-wrapper {
    width: 43vw;
    flex: none;
    padding: 0;
    padding-top: 3rem;
    order: 1;
  }

  #sbsr-2432 .cs-button-solid {
    margin-top: 3rem;
  }
}

/* Large Desktop - 1400px */
@media only screen and (min-width: 1400px) {
  #sbsr-2432 .cs-background {
    width: 60vw;
    max-width: 55.625rem;
  }
}
/* ===========================
   SBSR: Checklist & Stats
   (passar in i #sbsr-2432)
   =========================== */

/* Mobile / base */
@media only screen and (min-width: 0rem) {
  /* -------- Checklist -------- */
  #sbsr-2432 .cs-checklist {
    margin: 1.5rem 0 2rem 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1.25rem;
  }

  #sbsr-2432 .cs-checklist li {
    position: relative;
    color: var(--bodyTextColorWhite);
    font-size: 1rem;
    line-height: 1.55;
  }
  #sbsr-2432 .cs-checklist li:last-of-type {
    margin-bottom: 1rem;
  }

  /* Styla checklistans listpunkter med ikon */
  #sbsr-2432 .cs-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #sbsr-2432 .cs-checklist .cs-li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem; /* samma spacing som tidigare */
    color: var(--bodyTextColorWhite);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
  }

  /* ikonen */
  #sbsr-2432 .cs-checklist .cs-icon {
    width: 1.5rem;   /* ca 24px */
    height: auto;
    margin-right: 0.75rem;
    flex-shrink: 0;
  }

  /* -------- Stats -------- */
  #sbsr-2432 .cs-stats {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 32rem;
  }

  #sbsr-2432 .cs-stats > div {
    text-align: center;
    padding: 0.9rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid #21252E;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  }

  #sbsr-2432 .cs-stats > div strong {
    display: block;
    font-size: clamp(1.25rem, 4.6vw, 1.75rem);
    line-height: 1.1;
    color: var(--primary);
    letter-spacing: 0.01em;
    text-shadow: 0 0 18px rgba(248,205,19,0.28);
    margin-bottom: 0.25rem;
  }

  #sbsr-2432 .cs-stats > div br {
    display: block;
    content: "";
    margin-bottom: 0.25rem;
  }

  #sbsr-2432 .cs-stats > div {
    color: var(--bodyTextColorWhite);
    font-size: 0.9rem;
    opacity: 0.95;
  }
}

/* Tablet */
@media only screen and (min-width: 48rem) {
  #sbsr-2432 .cs-checklist {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0.75rem 2rem;
    max-width: 36rem;
  }

  #sbsr-2432 .cs-stats {
    gap: 1rem;
    max-width: 38rem;
  }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
  #sbsr-2432 .cs-checklist {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    max-width: 40rem;
    margin-bottom: -2rem;
  }

  #sbsr-2432 .cs-stats {
    margin-top: 2rem;
    max-width: 42rem;
  }

  #sbsr-2432 .cs-stats > div {
    padding: 2rem 0.9rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  #sbsr-2432 .cs-stats > div:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: #fed31592 0px 0px 8px;
  }
  #sbsr-2432 .cs-checklist li:last-of-type {
    margin-bottom: 0;
  }
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
      @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }
  #reviews-2290 {
    background: linear-gradient(#060609 0.5%,#060609 0.5%, #151515 100%);
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
    /* clips the orbs from causing overflow issues */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #reviews-2290 .cs-container {
    width: 100%;
    /* changes to 1280px at large desktop */
    max-width: 51.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-2290 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-2290 .cs-title {
    max-width: 20ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #reviews-2290 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #reviews-2290 .cs-item {
    text-align: left;
    list-style: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    /* 16px - 32px */
    padding: clamp(1rem, 2vw, 2rem);
    background: #181718;
    border: 1px solid #21252E;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-column: span 12;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
    position: relative;
    z-index: 1;
    transition: transform 0.3s;
  }
  #reviews-2290 .cs-item::before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--secondary);
    /* prevents the mouse from interacting it */
    pointer-events: none;
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #reviews-2290 .cs-item::after {
    content: "";
    width: 0;
    height: 0.02rem;
    background: var(--primary);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: width 0.5s;
    margin-left: 2%;
  }
  #reviews-2290 .cs-item:hover {
    transform: translateY(-0.5rem);
    border-color: var(--primary);
    box-shadow: #fed31592 0px 0px 6px;
  }
  #reviews-2290 .cs-item:hover::after {
    margin-left: 2%;
    width: 95.75%;
  }
  #reviews-2290 .cs-quote {
    width: 2.5rem;
    height: auto;
    display: block;
  }
  #reviews-2290 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    /* 16px - 24px */
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    border-bottom: 1px solid var(--primary);
  }
  #reviews-2290 .cs-topper {
      color: #F8CD13;
      letter-spacing: .12em;
  }
  #reviews-2290 .cs-text {
    max-width: 80%;
    color: var(--bodyTextColorWhite);
  }
  #reviews-2290 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #reviews-2290 .cs-flex-group {
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 8px - 24px */
    gap: clamp(0.8rem, 1.5vw, 1rem);
  }
  #reviews-2290 .cs-profile {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
  }
  #reviews-2290 .cs-profile img {
    width: 100%;
    height: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-2290 .cs-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #reviews-2290 .cs-job {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
      #reviews-2290 .cs-bubbles2 {
        width: 28.1875rem;
        height: 32rem;
        display: block;
        position: absolute;
        /* changes to 160px at larger desktop */
        right: -10.25rem;
        bottom: 10rem;
        z-index: -1;
    }
    #reviews-2290 .cs-bubbles2:before {
        /* white border bubble */
        content: "";
        width: 18.625rem;
        height: 18.625rem;
        background: transparent;
        border: 1px solid var(--primary);
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 18rem;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 10s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        box-shadow: inset var(--primary) 0px 0px 24px;
    }
    #reviews-2290 .cs-bubbles2:after {
        /* orange bubble */
        content: "";
        width: 12.25rem;
        height: 12.25rem;
        background: var(--primary);
        opacity: 0.4;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 12s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-2290 .cs-item {
    grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 1424px) {
  #reviews-2290 .cs-container {
    max-width: 80rem;
  }
  #reviews-2290 .cs-item {
    grid-column: span 3;
  }
}

/* =============== ============================================================ ===== */
/* =============== Reviews Carousel (override & layout) ========================= */
/* =============== ============================================================ ===== */
#reviews-2290 .rc-wrapper{
  position: relative;
  width: 100%;
}

#reviews-2290 .rc-viewport{
  overflow: hidden;
  width: 100%;
}

#reviews-2290 .rc-track{
  /* Överskriver tidigare grid -> blir rad med flex */
  display: flex !important;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  will-change: transform;
  transition: transform .45s ease;
  padding: 0; margin: 0;
}

/* 4 visuella kolumner alltid (desktop), korten får fast bas-bredd */
#reviews-2290 .rc-track .cs-item{
  flex: 0 0 calc((100% - 3 * clamp(0.5rem, 2vw, 1.25rem)) / 4);
  /* behåll dina befintliga kort-stilar från tidigare */
}
@media (max-width: 1443px){
  #reviews-2290 .rc-track .cs-item{
    /* 3 kolumner */
    flex-basis: calc((100% - 2 * clamp(0.5rem, 2vw, 1.25rem)) / 3);
  }
}

/* Dölj ev. grid-kolumnspridning från äldre regler */
@media (min-width:0rem){
  #reviews-2290 .cs-card-group { grid-template-columns: none; }
}

/* mobiler ska växla till 1–2-3 kort */

@media (max-width: 900px){
  #reviews-2290 .rc-track .cs-item{ flex-basis: calc(50% - 0.5rem); }
}
@media (max-width: 520px){
  #reviews-2290 .rc-track .cs-item{ flex-basis: 100%; }
}


/* ===== Piltangenter – matcha hero-2042 look ===== */
#reviews-2290 .carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(0,0,0,.50);
  color: #F8CD13;
  border: 2px solid #F8CD13;
  display: grid; place-items: center; cursor: pointer;
  z-index: 5;
  transition: background .25s, transform .15s, box-shadow .25s;
}
#reviews-2290 .carousel-btn:hover,
#reviews-2290 .carousel-btn:focus-visible{
  background:#000000bd;
  box-shadow: var(--primary) 0 0 8px;
  outline:none;
}
#reviews-2290 .carousel-btn:active{ transform: translateY(-50%) scale(.96); }
#reviews-2290 .carousel-btn.prev{ left: -66px; }
#reviews-2290 .carousel-btn.next{ right: -66px; }

@media (max-width: 979px){
  #reviews-2290 .carousel-btn{ display:none; } /* som i hero: göm på små skärmar */
}

/* ===== Dots / indikatorer ===== */
#reviews-2290 .rc-dots{
  margin-top: 1rem;
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
}
#reviews-2290 .rc-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: transparent;
  border: 2px solid var(--primary);
  opacity: .65;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#reviews-2290 .rc-dot[aria-selected="true"]{
  background: var(--primary);
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(248,205,19,.6);
}
#reviews-2290 .rc-dot:hover{ opacity: 1; cursor: pointer; }
#reviews-2290 .rc-dot:focus-visible{
  outline: none; box-shadow: 0 0 0 3px rgba(248,205,19,.35);
}

/* Låt hover-lyftet få synas utanför viewporten */
#reviews-2290 .rc-viewport{
  overflow-x: hidden;     /* behåll horisontell maskning */
  overflow-y: visible;    /* men visa på höjden */
  padding: 12px 0;        /* lite luft så skuggan inte nuddar kanten */
}

/* Se till att höjdeffekten får gå över grannar */
#reviews-2290 .rc-track{ 
  position: relative;
}

#reviews-2290 .rc-track .cs-item{
  position: relative; 
  z-index: 0;            /* normal nivå */
  /* (dina befintliga hover-stilar fortsätter gälla) */
}

#reviews-2290 .rc-track .cs-item:hover{
  z-index: 10;           /* lyft över grannkort + dots */
  /* dina existerande hover-effekter (translateY, box-shadow, border-color) ligger redan i dina regler */
}