/* Page theme */
    body.case-npa{
      --page-bg:#858412;
      --gryt-orange: var(--page-bg); /* kill any default orange sections */
      background: var(--page-bg) !important;
    }
    /* Orange underline on ALL headings in this case */
    body.case-npa .marked-title::after{ background:#c1711d !important; }
    body.case-npa .case-hero-title{ font-size: clamp(22px, 3.0vw, 44px) !important; }
    body.case-npa .case-hero-kicker{ font-size: 36px !important; }

    body.case-npa .npa-text h3{ border-bottom-color:#c1711d !important; }
    body.case-npa .npa-center-title,
    body.case-npa .npa-portraits-title{ display:inline-block; position:relative; padding-bottom:14px; }
    body.case-npa .npa-center-title::after,
    body.case-npa .npa-portraits-title::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height:3px;
      background:#c1711d;
      border-radius:3px;
    }
    /* Flip layout (varannan sida) */
    .npa-two.flip .npa-text{ order: 2; }
    .npa-two.flip .npa-media{ order: 1; }

    /* ---------- NPA custom sections (match "Koll på lagen"-känsla) ---------- */
    .npa-wrap{width:min(1040px,92vw);margin:0 auto;}
    .npa-wrap-portraits{width:min(820px,92vw);}
    .npa-center-title{
      text-align:center;
      margin:0 auto 22px;
      font-size:40px;
      letter-spacing:.06em;
      line-height:1.15;
    }
    .npa-subtle{
      max-width:920px;
      margin:0 auto;
      font-size:18px;
      line-height:1.85;
      opacity:.92;
      text-align:center;
    }

    .npa-section{
      padding: 44px 0;
      background: transparent;
    }
    .npa-section + .npa-section{padding-top: 18px;}

    .npa-two{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items:start;
    }
    /* Flip: media left, text right */
    .npa-two.flip .npa-media{grid-column:1;}
    .npa-two.flip .npa-text{grid-column:2;}
    .npa-two.flip .npa-media{grid-row:1;}
    .npa-two.flip .npa-text{grid-row:1;}
    .npa-text h3{
      font-size:22px;
      line-height:1.15;
      margin:0 0 12px;
      font-weight:600;
      letter-spacing:0;
      padding-bottom:10px;
      border-bottom:3px solid var(--gryt-accent);
      display:inline-block;
    }
    .npa-text p{
      font-size:17px;
      line-height:1.9;
      opacity:.92;
      margin:0 0 16px;
      max-width:62ch;
    }

    .npa-media{
      align-self:start;
    }
    .npa-media video{
      width:100%;
      border-radius:18px;
      display:block;
      background:#000;
    }

    /* Stillbilder gallery */
    .npa-stills-grid img{cursor:pointer;}
    .img-lightbox{
      position:fixed; inset:0;
      background:rgba(0,0,0,0.88);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:10000;
      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);}

    .npa-stills{
      padding: 10px 0 52px;
    }
    .npa-stills-grid{
      column-count: 3;
      column-gap: 18px;
      margin-top: 22px;
    }
    .npa-stills-grid img{
      width:100%;
      display:block;
      border-radius:18px;
      margin:0 0 18px;
      break-inside: avoid;
    }

    /* Porträttfilmer */
    .npa-portraits-title{
      text-align:center;
      margin: 12px auto 26px;
      font-size:40px;
      letter-spacing:.06em;
      line-height:1.15;
    }
    .npa-person{
      padding: 22px 0;
    }
    .npa-person + .npa-person{
      padding-top: 8px;
    }
    .npa-person .role{
      font-size:18px;
      opacity:.92;
      line-height:1.5;
    }
    .npa-person .name{
      margin:0 0 10px;
      font-size:32px;
      letter-spacing:.04em;
      line-height:1.1;
    }

    /* Mobile */
    
    /* Portrait tweaks: less empty space + underline per person */
    .npa-person{padding:6px 0;}
    .npa-person + .npa-person{padding-top:6px;margin-top:0;border-top:1px solid rgba(255,255,255,0.08);}
    .npa-person .npa-two{gap:4px;align-items:center;}
    /* Lock portrait videos to a consistent size (prevents 9x16/16x9 mismatch) */
    .npa-person .npa-media{
      aspect-ratio: 16 / 9;
      overflow:hidden;
      border-radius:18px;
      background:rgba(0,0,0,0.15);
    }
    .npa-person .npa-media video{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border-radius:0; /* radius handled by container */
      background:#000;
    }
    .npa-person .npa-two.flip{grid-template-columns:1.05fr .95fr;}
    .npa-person .npa-two.flip .npa-text{text-align:right;}
    .npa-person .npa-two.flip .role{text-align:right;}
    .npa-person .npa-two.flip .npa-media{justify-self:end;}
    
    
    .npa-person .npa-text{max-width:none;}
    .npa-person .name{
      display:inline-block;
      position:relative;
      padding-bottom:12px;
      margin:0 0 14px;
    }
    .npa-person .name::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height:3px;
      background:#c1711d;
      border-radius:3px;
      opacity:0.95;
    }


    @media (max-width: 900px){
      /* Stack all two-column sections reliably (prevents disappearing content when flip uses grid-column) */
      .npa-two{
        display:flex;
        flex-direction:column;
        gap:16px;
      }
      .npa-two.flip{
        display:flex;
        flex-direction:column;
        gap:16px;
      }
      .npa-two .npa-media{order:1;}
      .npa-two .npa-text{order:2;}

      .npa-center-title,.npa-portraits-title{font-size:32px;}
      .npa-stills-grid{column-count:1;column-gap:0;}
      .npa-stills-grid img{border-radius:16px;margin:0 0 14px;}
    }
.npa-center-title,.npa-portraits-title{font-size:32px;}
      .npa-stills-grid{column-count:1;column-gap:0;}
      .npa-stills-grid img{border-radius:16px;margin:0 0 14px;}
    }
  
/* ===== Portrait responsive consistency (override) ===== */
/* Desktop/tablet: keep a stable media column so all rows match */
.npa-wrap-portraits .npa-two{
  grid-template-columns: minmax(0, 1fr) clamp(320px, 44vw, 520px);
}
.npa-wrap-portraits .npa-two.flip{
  grid-template-columns: clamp(320px, 44vw, 520px) minmax(0, 1fr);
}
.npa-wrap-portraits .npa-media{
  max-width: none; /* let the column decide */
}

/* Narrow screens: always stack (prevents uneven intermediate layouts) */
@media (max-width: 980px){
  .npa-wrap-portraits .npa-two,
  .npa-wrap-portraits .npa-two.flip{
    grid-template-columns: 1fr !important;
  }
  .npa-wrap-portraits .npa-text{
    text-align: left !important;
    justify-self: stretch !important;
  }
  .npa-wrap-portraits .role{
    text-align: left !important;
  }
  .npa-wrap-portraits .npa-media{
    width: 100% !important;
    max-width: none !important;
  }
}


/* ===== FINAL portrait tuning ===== */
/* Desktop: consistent portrait grid + nicer spacing */
.npa-wrap-portraits .npa-two{
  grid-template-columns: 1fr minmax(360px, 460px);
  gap: 24px;
  align-items: center;
}
.npa-wrap-portraits .npa-two.flip{
  grid-template-columns: minmax(360px, 460px) 1fr;
  gap: 24px;
  align-items: center;
}
.npa-wrap-portraits .npa-media{
  max-width: 460px;
  width: 100%;
}

/* Mobile: center text + add breathing room between video and text */
@media (max-width: 900px){
  .npa-wrap-portraits .npa-two,
  .npa-wrap-portraits .npa-two.flip{
    gap: 22px !important;
  }
  .npa-wrap-portraits .npa-text,
  .npa-wrap-portraits .role{
    text-align: center !important;
  }
  .npa-wrap-portraits .name{
    text-align: center !important;
  }
  /* center underline under name */
  .npa-wrap-portraits .name::after{
    left: 50% !important;
    transform: translateX(-50%);
    width: min(220px, 80%);
  }
}


/* ===== Gallery lightbox fix ===== */
.npa-stills-grid img{ cursor: zoom-in; }
.img-lightbox{ z-index: 20000; } /* above header/hamburger */
.img-lightbox-close{ z-index: 20001; }


/* ===== Portrait spacing (more breathing room) ===== */
.npa-person{ padding: 14px 0 !important; }
.npa-person + .npa-person{
  padding-top: 18px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}
@media (max-width: 900px){
  .npa-person{ padding: 16px 0 !important; }
  .npa-person + .npa-person{ margin-top: 14px !important; }
}


/* ===== Gallery columns (desktop multi-column) ===== */
.npa-stills-grid{
  column-count: 3 !important;
  column-gap: 18px !important;
}
@media (max-width: 1100px){
  .npa-stills-grid{ column-count: 2 !important; }
}
@media (max-width: 700px){
  .npa-stills-grid{ column-count: 1 !important; column-gap: 0 !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 .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 .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;
            }