body{background:#f26a2b;}

      
/* Koll på lagen – custom gallery layout (matchar gamla myportfolio-strukturen) */
.kpl-gallery{background:var(--gryt-orange);color:#fff;padding:16px 0 0;}
.kpl-container{width:min(1180px,92vw);margin:0 auto;}
.kpl-intro{text-align:center;margin:0 auto 70px;}
.kpl-intro h2{letter-spacing:.06em;margin:0 0 18px;font-size:40px;line-height:1.1;}
.kpl-intro p{max-width:920px;margin:0 auto;font-size:18px;line-height:1.8;opacity:.92}
.kpl-awards{display:flex;gap:36px;justify-content:center;align-items:center;margin:42px 0 54px;flex-wrap:wrap}
.kpl-awards img{height:66px;width:auto;opacity:.92}
.kpl-full{width:100%;border-radius: 10px;display:block}
.kpl-section{margin:80px 0 0}
.kpl-two{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.kpl-two.flip{grid-template-columns:.9fr 1.1fr}
.kpl-title{margin:0 0 18px;font-size:32px;letter-spacing:.08em}
.kpl-text{font-size:17px;line-height:1.9;opacity:.92}
.kpl-text p{margin:0 0 18px}
.kpl-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 0}
.kpl-row3 img{width:100%;display:block;border-radius:10px}
.kpl-banner{margin:70px 0 0}
.kpl-thumb{position:relative;display:block;border-radius: 10px;overflow:hidden}
.kpl-thumb img{width:100%;display:block}
.kpl-thumb .play{
  position:absolute;inset:0;display:grid;place-items:center;
}
.kpl-thumb .play:before{
  content:"";width:74px;height:74px;border-radius:999px;background:rgba(255,255,255,.92);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.kpl-thumb .play:after{
  content:"";margin-left:6px;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid rgba(0,0,0,.78);
  position:absolute;
}
@media (max-width: 980px){
  .kpl-two,.kpl-two.flip{grid-template-columns:1fr;gap:26px}
  .kpl-intro h2{font-size:32px}
}

    
    /* --- Fix legacy classnames so layout stays consistent --- */
    .kpl-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
    .kpl-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .kpl-three img{width:100%;height:auto;display:block;border-radius:14px}
    .kpl-play,.play{
      position:absolute;inset:0;display:grid;place-items:center;
      background:linear-gradient(180deg,rgba(0,0,0,0.10),rgba(0,0,0,0.55));
    }
    .kpl-play:after,.play:after{
      content:"";width:78px;height:78px;border-radius:999px;
      background:rgba(255,255,255,0.86);
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M26 20v24l20-12z'/%3E%3C/svg%3E") center/46px 46px no-repeat;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M26 20v24l20-12z'/%3E%3C/svg%3E") center/46px 46px no-repeat;
    }
    figure.kpl-full{margin:0}
    figure.kpl-full img{width:100%;height:auto;display:block;border-radius:18px}
    
  
/* --- overrides for KOLL PÅ LAGEN layout --- */
.kpl-gallery{background:#f26a2b;}
.kpl-wrap{max-width:1100px;margin:0 auto;padding:16px 24px 0;}
.kpl-full{margin:44px 0;}
.kpl-full img{display:block;width:100%;height:auto;border-radius:14px;}
.kpl-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0 44px;}
.kpl-row3 img{display:block;width:100%;height:auto;border-radius:12px;}
.kpl-two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin:44px 0;}
.kpl-two .kpl-video{aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.15);}
.kpl-two video,.kpl-two iframe{width:100%;height:100%;display:block;}
@media (max-width: 900px){
  .kpl-two{grid-template-columns:1fr;gap:22px;}
  .kpl-row3{grid-template-columns:1fr;gap:14px;}
  .kpl-wrap{padding:16px 18px 0;}
}

:root{--kpl-orange:#f26a2b;--kpl-underline:#00a3a1;--gryt-orange:#f26a2b;--gryt-teal:#00a3a1;}
body{background:var(--kpl-orange) !important;}
.kpl-gallery, .kpl-intro, .kpl-section{background:transparent;}
/* Filmrubriker i samma stil som övriga rubriker */
.kpl-text h3{font-size:22px;line-height:1.15;margin:0 0 12px;font-weight:600;letter-spacing:0;text-transform:none;padding-bottom:10px;border-bottom:3px solid var(--kpl-underline);display:inline-block;}
/* Mindre vertikalt glapp så det inte blir stor tom yta */
.kpl-section{padding:44px 0;}
.kpl-two{gap:44px; align-items:start;}
.kpl-media{align-self:start;}

/* Tightare mellan filmerna */
.kpl-section + .kpl-section{padding-top:24px;}
.kpl-full{margin:28px 0 !important;}
.kpl-row3{margin:18px 0 28px !important;}


/* Page-only spacing tweaks (do not affect other pages) */
body.case-kollpalagen .case-content{padding-bottom:56px;}


/* --- Overrides (Feb 2026) --- */
.kpl-thumb{cursor:pointer !important;}
.kpl-play{pointer-events:none !important;}

.kpl-play:after{content:none !important;}
.kpl-thumb .play{display:none !important;}
.kpl-gallery{padding:16px 0 0 !important;}
.kpl-intro{margin:0 auto 40px !important;}
.kpl-full{margin:22px 0 !important;}
.kpl-section{padding:28px 0 !important; margin:50px auto 0 !important;}
.kpl-two{margin:28px 0 !important; gap:34px !important;}
.kpl-row3{margin:16px 0 20px !important; gap:18px !important;}
.kpl-full-still-wrap{padding:0 0 24px !important;}

  /* Scoped additions for Koll på lagen */
  .kpl-thumb[data-type="video"]{position:relative;display:block;border-radius:22px;overflow:hidden;cursor:pointer;}
  .kpl-thumb[data-type="video"] .kpl-thumb-img{width:100%;height:100%;display:block;object-fit:cover;filter:none !important;opacity:1 !important;}
  .kpl-thumb[data-type="video"]:hover .kpl-thumb-img{transform:scale(1.01);} 
  .kpl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
  .kpl-play:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:12px 0 12px 18px;border-color:transparent transparent transparent rgba(255,255,255,.92);} 

  .kpl-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.75);z-index:9999;}
  .kpl-modal[aria-hidden="false"]{display:flex;}
  .kpl-modal-dialog{width:min(1100px,100%);background:#000;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .kpl-modal-bar{display:flex;justify-content:flex-end;gap:8px;padding:10px 10px;background:rgba(0,0,0,.65);} 
  .kpl-modal-close{appearance:none;border:0;background:rgba(255,255,255,.12);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer;font:inherit;}
  .kpl-modal-close:hover{background:rgba(255,255,255,.18);} 
  .kpl-modal-video{width:100%;height:auto;display:block;background:#000;}

  .kpl-full-still-wrap{padding:0 0 40px;}
  .kpl-full-still{width:100%;border-radius:22px;display:block;}

/* Force single play icon */
.kpl-play:before{content:none !important;}
.kpl-play:after{content:"" !important;position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:12px 0 12px 18px;border-color:transparent transparent transparent #fff;}

/* FINAL override: clean single play icon */
.kpl-thumb[data-type="video"] .kpl-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:72px !important;
  height:72px !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.55) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.kpl-thumb[data-type="video"] .kpl-play::after{ content:none !important; }
.kpl-thumb[data-type="video"] .kpl-play::before{
  content:'' !important;
  width:0;
  height:0;
  border-style:solid;
  border-width:12px 0 12px 18px;
  border-color:transparent transparent transparent rgba(255,255,255,.95);
  margin-left:4px;
}


/* FINAL override: no grayscale on video thumbs */
.kpl-thumb img{ filter:none !important; opacity:1 !important; }



body.case-qstar {
                --page-bg: #e33827;
                --ink: #ffffff;
                --muted: rgba(255, 255, 255, 0.82);
                --line: #f2b23a;
                --gryt-orange: var(--page-bg);
                background: var(--page-bg) !important;
                color: var(--ink);
            }
            body.case-qstar .marked-title::after {
                background: var(--line) !important;
            }
            body.case-qstar.case-detail .case-hero-video::before {
                content: none !important;
            }
            body.case-qstar.case-detail .case-page {
                background: var(--page-bg) !important;
            }

            body.case-qstar .case-we-do {
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
            }
            body.case-qstar .we-do-title,
            body.case-qstar .we-do-list li {
                color: var(--ink) !important;
            }
            body.case-qstar .case-left p {
                color: var(--muted) !important;
            }

            .q-wrap {
                width: min(1040px, 92vw);
                margin: 0 auto;
            }
            .q-wide {
                width: min(1280px, 94vw);
                margin: 0 auto;
            }
            .q-section {
                padding: 44px 0;
                background: transparent;
            }
            .q-section + .q-section {
                padding-top: 18px;
            }

            .q-two {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 36px;
                align-items: start;
            }
            .q-two.flip .q-text {
                order: 2;
            }
            .q-two.flip .q-media {
                order: 1;
            }

            .q-text h3 {
                font-size: 22px;
                line-height: 1.15;
                margin: 0 0 12px;
                font-weight: 600;
                padding-bottom: 10px;
                border-bottom: 3px solid var(--line);
                display: inline-block;
                color: var(--ink);
            }
            .q-text p {
                font-size: 17px;
                line-height: 1.85;
                color: var(--muted);
                margin: 0 0 16px;
                max-width: 62ch;
            }

            .q-media video {
                width: 100%;
                border-radius: 18px;
                display: block;
                background: #0a0a0a;
                box-shadow: 0 12px 36px rgba(11, 45, 39, 0.14);
            }

            .q-center {
                text-align: center;
            }
            .q-center-title {
                text-align: center;
                margin: 12px auto 18px;
                font-size: 40px;
                letter-spacing: 0.06em;
                line-height: 1.15;
                display: inline-block;
                position: relative;
                padding-bottom: 14px;
                color: var(--ink);
            }
            .q-center-title::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 3px;
                background: var(--line);
                border-radius: 3px;
            }
            .q-center-lead {
                max-width: 980px;
                margin: 0 auto 22px;
                padding: 0 16px;
                text-align: center;
                font-size: 18px;
                line-height: 1.85;
                color: var(--muted);
            }

            .q-gallery {
                padding: 10px 0 10px;
            }
            .q-gallery-grid {
                column-count: 3;
                column-gap: 18px;
                margin-top: 22px;
            }
            .q-gallery-grid img {
                width: 100%;
                display: block;
                border-radius: 18px;
                margin: 0 0 18px;
                break-inside: avoid;
                cursor: zoom-in;
                box-shadow: 0 12px 34px rgba(11, 45, 39, 0.14);
            }

            .q-row5 {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 14px;
                margin-top: 18px;
            }
            .q-row5 img {
                width: 100%;
                display: block;
                border-radius: 16px;
                cursor: zoom-in;
                box-shadow: 0 12px 34px rgba(11, 45, 39, 0.14);
            }

            .q-vert3 {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 18px;
                margin-top: 18px;
            }
            .q-vert3 video {
                width: 100%;
                aspect-ratio: 9 / 16;
                object-fit: cover;
                border-radius: 18px;
                background: #0a0a0a;
                box-shadow: 0 12px 36px rgba(11, 45, 39, 0.14);
            }

            .q-grid2x2 {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
                margin-top: 18px;
            }
            .q-grid2x2 video {
                width: 100%;
                border-radius: 18px;
                display: block;
                background: #0a0a0a;
                box-shadow: 0 12px 36px rgba(11, 45, 39, 0.14);
            }

            .img-lightbox {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.88);
                display: none;
                align-items: center;
                justify-content: center;
                z-index: 20000;
                padding: 24px;
            }
            .img-lightbox[aria-hidden="false"] {
                display: flex;
            }
            .img-lightbox-inner {
                width: min(1200px, 94vw);
                max-height: 90vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .img-lightbox-inner img {
                max-width: 100%;
                max-height: 90vh;
                border-radius: 18px;
                display: block;
                box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
            }
            .img-lightbox-close {
                position: absolute;
                top: 18px;
                right: 18px;
                appearance: none;
                border: 0;
                background: rgba(255, 255, 255, 0.14);
                color: #fff;
                padding: 10px 12px;
                border-radius: 12px;
                cursor: pointer;
                font: inherit;
            }
            .img-lightbox-close:hover {
                background: rgba(255, 255, 255, 0.22);
            }

            @media (max-width: 1100px) {
                .q-row5 {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            @media (max-width: 960px) {
                .q-two {
                    grid-template-columns: 1fr;
                    gap: 18px;
                }
                .q-gallery-grid {
                    column-count: 2;
                }
                .q-vert3 {
                    grid-template-columns: 1fr;
                }
                .q-grid2x2 {
                    grid-template-columns: 1fr;
                }
            }
            @media (max-width: 640px) {
                .q-gallery-grid {
                    column-count: 1;
                    column-gap: 0;
                }
                .q-gallery-grid img {
                    border-radius: 16px;
                    margin: 0 0 14px;
                }
                .q-center-title {
                    font-size: 34px;
                }
                .q-row5 {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* One-row small portraits */
            .q-portraits-row {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 12px;
                margin-top: 18px;
            }
            .q-portraits-row img {
                width: 100%;
                display: block;
                border-radius: 14px;
                cursor: zoom-in;
                box-shadow: 0 12px 34px rgba(11, 45, 39, 0.14);
            }
            @media (max-width: 960px) {
                .q-portraits-row {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            @media (max-width: 640px) {
                .q-portraits-row {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* Customer stills grid */
            .q-kunder-grid {
                width: min(1100px, calc(100% - 64px));
                margin: 22px auto 0;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                gap: 16px;
                align-items: stretch;
            }
            .q-kunder-grid img {
                width: 100%;
                display: block;
                border-radius: 14px;
                cursor: zoom-in;
                box-shadow: 0 12px 34px rgba(11, 45, 39, 0.14);
            }
            @media (max-width: 1100px) {
                .q-kunder-grid {
                    width: min(1100px, calc(100% - 64px));
                    margin: 22px auto 0;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                    gap: 16px;
                    align-items: stretch;
                }
            }
            @media (max-width: 960px) {
                .q-kunder-grid {
                    width: min(1100px, calc(100% - 64px));
                    margin: 22px auto 0;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                    gap: 16px;
                    align-items: stretch;
                }
            }
            @media (max-width: 640px) {
                .q-kunder-grid {
                    width: min(1100px, calc(100% - 64px));
                    margin: 22px auto 0;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                    gap: 16px;
                    align-items: stretch;
                }
            }

            /* Safari poster fix: remove native 'dim' poster overlay by using a custom poster layer */
            body.safari-poster-fix .qs-video-shell {
                position: relative;
                overflow: hidden;
                border-radius: 18px;
            }
            body.safari-poster-fix .qs-video-shell video {
                display: block;
                width: 100%;
                border-radius: 18px;
                background: #0a0a0a;
            }
            body.safari-poster-fix .qs-poster {
                position: relative;
                position: absolute;
                inset: 0;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 18px;
            }
            body.safari-poster-fix .qs-poster::after {
                content: "";
                width: 74px;
                height: 74px;
                border-radius: 999px;
                background: rgba(0, 0, 0, 0.35);
                backdrop-filter: saturate(120%) blur(2px);
                -webkit-backdrop-filter: saturate(120%) blur(2px);
                box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
                position: relative;
            }
            body.safari-poster-fix .qs-poster::before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-left: 18px solid #fff;
                border-top: 12px solid transparent;
                border-bottom: 12px solid transparent;
                transform: translateX(4px);
                z-index: 2;
            }
            body.safari-poster-fix .qs-video-shell.is-playing .qs-poster {
                display: none;
            }

            /* --- Safari/Chrome video clipping + no dim overlay --- */
            .q-media,
            .qs-video-shell {
                overflow: hidden !important;
                border-radius: 18px !important;
                background: #000;
            }
            .q-media video,
            .qs-video-shell video {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 0 !important;
                background: #000;
            }
            /* kill any accidental dimming overlays */
            .q-media::before,
            .q-media::after,
            .qs-video-shell::before,
            .qs-video-shell::after {
                background: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                filter: none !important;
            }

            .q-two + .q-two {
                margin-top: 32px;
            }

            .q-kunder-grid img {
                border-radius: 16px;
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
            }

/* Safari/WebKit: reduce double-rendered headings without touching other browsers */
@supports (-webkit-touch-callout: none) {
  .case-hero-video::before{ content:none !important; }
  h1,h2,h3,.case-hero-title,.marked-title,.we-do-title{
    text-shadow:none !important;
    -webkit-text-stroke:0 transparent !important;
    -webkit-text-stroke-width:0 !important;
    font-synthesis:none !important;
    font-weight:400 !important;
  }
}


            html body.case-detail,
            html body.case-detail * {
                -webkit-font-smoothing: antialiased;
                text-rendering: geometricPrecision;
            }

            body.case-detail .q-center-title,
            body.case-detail .q-text h3,
            body.case-detail .kpl-text h3,
            body.case-detail .we-do-title,
            body.case-detail .we-do-list,
            body.case-detail .we-do-list li,
            body.case-detail .marked-title,
            body.case-detail .top-nav a {
                text-shadow: none !important;
                -webkit-text-stroke: 0 transparent !important;
                -webkit-text-stroke-width: 0 !important;
                font-synthesis: none !important;
                font-synthesis-weight: none !important;
                font-synthesis-style: none !important;
                text-decoration: none !important;
                box-shadow: none !important;
            }

            body.case-detail .q-center-title,
            body.case-detail .q-text h3,
            body.case-detail .kpl-text h3,
            body.case-detail .we-do-title,
            body.case-detail .we-do-list li,
            body.case-detail .marked-title,
            body.case-detail .top-nav a {
                font-weight: 400 !important;
            }