.sp { background: var(--v-paper); color: var(--v-ink); font-family: var(--v-font); }
.sp-main { padding: 0 0 24px; }
.sp .vp-wrap { max-width: 1320px; }
@media (min-width: 1900px) { .sp .vp-wrap { max-width: 1680px; } }
.sp [data-vi] { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.sp [data-vi] svg { width: 100%; height: 100%; }


.sp-hero { display: grid; gap: 20px; padding-top: 36px; padding-bottom: 12px; align-items: center; }
.sp-hero-tekst { display: grid; gap: 18px; justify-items: start; }
.sp-hero .vp-lead { max-width: 46ch; }
.sp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 14px/1 var(--v-font); letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink-2); }
.sp-crew { width: 150px; height: 150px; justify-self: center; }
.sp-crew svg { width: 100%; height: 100%; }
@media (min-width: 900px) { .sp-hero { grid-template-columns: 1fr 220px; padding-top: 64px; } .sp-crew { width: 210px; height: 210px; } }
.sp-knapp { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 14px 22px; border-radius: 999px; border: 2.5px solid var(--v-ink); background: var(--v-card); color: var(--v-ink); font: 700 17px/1 var(--v-font); text-decoration: none; box-shadow: var(--v-pop-sm); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.sp-knapp:hover { transform: translate(-1px, -1px); box-shadow: var(--v-pop); }
.sp-knapp:focus-visible, .sp a:focus-visible, .sp button:focus-visible { outline: 3px solid var(--v-camera); outline-offset: 3px; }


.sp-sticker { background: var(--v-card); border: 2.5px solid var(--v-ink); border-radius: var(--v-radius); box-shadow: var(--v-pop); padding: 18px 20px; }
.sp-sticker-gul { background: var(--v-wash-yellow); }
.sp-sticker-bla { background: var(--v-wash-blue); }
.sp-sticker-oransje { background: var(--v-wash-orange); }
.sp-merknader { display: grid; gap: 16px; margin: 18px 0 8px; }
.sp-merknader .sp-sticker { display: flex; gap: 14px; align-items: flex-start; }
.sp-merknader .sp-sticker > [data-vi] { flex: 0 0 auto; width: 34px; height: 34px; }
.sp-merknader p { margin: 0; font: 500 17px/1.45 var(--v-font); }
.sp-merknader b { font-weight: 800; }
@media (min-width: 760px) { .sp-merknader { grid-template-columns: 1fr 1fr; } }
.sp-merknader .sp-sticker:nth-child(1) { transform: rotate(-.6deg); }
.sp-merknader .sp-sticker:nth-child(2) { transform: rotate(.5deg); }


.sp-klientar { display: grid; gap: 44px; padding-top: 34px; }
.sp-klient-hovud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-klient-hovud h2 a { color: inherit; text-decoration: none; }
.sp-klient-hovud h2 a:hover { text-decoration: underline; text-decoration-color: var(--v-cta); text-decoration-thickness: 3px; }
.sp-klient-hovud .vp-h3 { font-size: clamp(22px, 3vw, 30px); }
.sp-alle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--v-ink); font-weight: 700; text-decoration: none; min-height: 44px; }
.sp-alle:hover { text-decoration: underline; }
.sp-logo { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; border: 2.5px solid var(--v-ink); background: var(--v-card); box-shadow: var(--v-pop-sm); overflow: hidden; flex: 0 0 auto; }
.sp-logo img { width: 80%; height: 80%; object-fit: contain; }
.sp-logo-bokstav { font: 800 26px/1 var(--v-font-display); background: var(--v-wash-orange); }
.sp-logo-stor { width: 76px; height: 76px; border-radius: 22px; }
.sp-logo-stor.sp-logo-bokstav { font-size: 38px; }
.sp-klient-namn { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }


.sp-filmar { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 1100px) { .sp-filmar { grid-template-columns: 1fr 1fr; } .sp-filmar > .sp-film-stor:only-child { grid-column: 1 / -1; } }
.sp-filmar-alle { margin-top: 26px; }
@media (min-width: 1100px) { .sp-filmar-alle { grid-template-columns: 1fr; } }
.sp-film { min-width: 0; }
.sp-film-lenke { display: grid; gap: 12px; color: inherit; text-decoration: none; background: var(--v-card); border: 2.5px solid var(--v-ink); border-radius: var(--v-radius); box-shadow: var(--v-pop); padding: 12px; transition: transform .14s ease, box-shadow .14s ease; }
.sp-film-lenke:hover { transform: translate(-2px, -2px); box-shadow: var(--v-pop-lg); }
.sp-festa .sp-film-lenke { background: var(--v-wash-mint); }
.sp-plakatar { position: relative; display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 5.0625fr); gap: 10px; align-items: stretch; }
.sp-plakatar:has(> .sp-plakat:only-of-type) { grid-template-columns: 1fr; }
.sp-plakat { margin: 0; position: relative; border-radius: 14px; overflow: hidden; border: 2px solid var(--v-ink); background: var(--v-ink); }
.sp-plakat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-wide { aspect-ratio: 16 / 9; }
.sp-tall { aspect-ratio: 9 / 16; }
.sp-plakatar .sp-tall { aspect-ratio: auto; }
.sp-plakat figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: var(--v-card); border: 2px solid var(--v-ink); font: 700 12px/1.2 var(--v-font); }
.sp-plakat-tom { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; color: #fff; font-weight: 700; }
.sp-spel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--v-cta); border: 2.5px solid var(--v-ink); box-shadow: var(--v-pop-sm); pointer-events: none; }
.sp-spel [data-vi] { width: 28px; height: 28px; }
.sp-film-tekst { display: grid; gap: 4px; padding: 2px 4px 4px; }
.sp-film-tittel { margin: 0; font: 700 clamp(19px, 2vw, 23px)/1.2 var(--v-font-display); letter-spacing: -.015em; }
.sp-aerleg { margin: 0; font: 500 14px/1.4 var(--v-font); color: var(--v-ink-2); }
.sp-aerleg-stor { font-size: 15px; display: inline-block; padding: 6px 12px; border-radius: 999px; border: 2px dashed var(--v-ink-2); }
.sp-tom { font: 500 19px/1.5 var(--v-font); }


.sp-hero-klient { padding-top: 24px; }
.sp-tilbake { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--v-ink); font-weight: 700; text-decoration: none; }
.sp-tilbake:hover { text-decoration: underline; }
.sp-filmside { padding-top: 18px; display: grid; gap: 24px; }
.sp-film-hovud { display: grid; gap: 12px; justify-items: start; }
.sp-film-hovud .vp-h2 { font-size: clamp(30px, 5vw, 54px); }
.sp-venter { margin-top: 14px; padding: 10px 14px; border: 2.5px solid var(--v-ink); border-radius: 14px; background: var(--v-wash-yellow); font-weight: 600; }
.sp-royst { display: inline-flex; gap: 6px; padding: 5px; border: 2.5px solid var(--v-ink); border-radius: 999px; background: var(--v-card); box-shadow: var(--v-pop-sm); justify-self: start; }
.sp-royst button { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; font: 700 15px/1 var(--v-font); color: var(--v-ink); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sp-royst button[aria-pressed="true"] { background: var(--v-ink); color: #fff; }


.sp-spelarar { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sp-spelarar { grid-template-columns: minmax(0, 16fr) minmax(0, 5.0625fr); align-items: start; } .sp-spelarar.sp-ein { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .sp-spelarar .sp-tall { max-width: 360px; width: 100%; justify-self: center; } }
.sp-spelar { margin: 0; display: grid; gap: 8px; min-width: 0; }
.sp-spelar figcaption { font: 700 14px/1 var(--v-font); color: var(--v-ink-2); }
.sp-skjerm { position: relative; border: 2.5px solid var(--v-ink); border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--v-pop); }
.sp-wide .sp-skjerm { aspect-ratio: 16 / 9; }
.sp-tall .sp-skjerm { aspect-ratio: 9 / 16; }
.sp-skjerm video, .sp-skjerm iframe, .sp-skjerm-plakat { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.sp-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 8px; align-items: center; padding: 14px 20px; border-radius: 999px; border: 2.5px solid var(--v-ink); background: var(--v-cta); color: var(--v-ink); font: 700 16px/1 var(--v-font); box-shadow: var(--v-pop-sm); cursor: pointer; }
.sp-lyd-knapp { position: absolute; right: 10px; bottom: 10px; padding: 8px 12px; border-radius: 999px; border: 2px solid var(--v-ink); background: var(--v-card); font: 700 13px/1 var(--v-font); cursor: pointer; }


.sp-gjer { display: grid; gap: 18px; }
@media (min-width: 900px) { .sp-gjer { grid-template-columns: 1fr 1fr; } }
.sp-gjer-kort { display: grid; gap: 12px; align-content: start; }
.sp-gjer-kort h2 { display: flex; gap: 8px; align-items: center; }
.sp-gjer-kort p { margin: 0; font: 500 17px/1.5 var(--v-font); }
.sp-ta-svar { min-height: 1.4em; font-weight: 600; }
.sp-eigen .sp-sticker { display: grid; gap: 12px; }
.sp-eigen p { margin: 0; font: 500 17px/1.5 var(--v-font); }
.sp-eigen .sp-sticker > [data-vi] { width: 34px; height: 34px; }
.sp-nedlastar { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-nedlast { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--v-ink); background: var(--v-card); color: var(--v-ink); text-decoration: none; font: 700 14px/1.2 var(--v-font); }
.sp-nedlast span { font-weight: 500; color: var(--v-ink-2); }
.sp-nedlast:hover { background: var(--v-paper-2); }
.sp-meir { display: grid; gap: 16px; }


.sp-spor { position: fixed; inset: auto 16px 16px 16px; z-index: 50; max-width: 520px; margin: 0 auto; }
.sp-spor .vp-row { margin-top: 12px; }


.sp-slutt { padding-top: 56px; padding-bottom: 32px; }
.sp-slutt-kort { display: grid; gap: 18px; align-items: center; background: var(--v-wash-mint); padding: 26px; }
.sp-slutt-kort .vp-crew { width: 120px; height: 120px; }
.sp-slutt-kort .vp-crew svg { width: 100%; height: 100%; }
.sp-slutt-kort .vp-row { margin-top: 14px; }
@media (min-width: 760px) { .sp-slutt-kort { grid-template-columns: 140px 1fr; } }


.sp-ok { padding: 12vh 16px; }
.sp-ok-kort { display: grid; gap: 16px; }