/* Slik jobber vi: mist and ridge, then five steps on black with a red line, then the ridge again. */
/* This page is mostly black, and the frosted header turns mid-grey over it. A denser
   bar and darker language labels keep the header text readable. */
.bar { background: rgba(238, 238, 239, .94); }
.locale button { color: var(--ink-2); }
.locale button[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .3em; }
.menu__sheet a[aria-current]:not(.pill) { color: var(--red-deep); }

/* Opening */
.sjv-head { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(calc(100svh - 77px), 46rem); overflow: clip; }
.sjv-ridge { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; }
.sjv-head__in { padding-block: clamp(56px, 9vh, 112px); }
.sjv-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(18px, 3vh, 30px); font-size: .8125rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.sjv-eyebrow::after { content: ""; width: clamp(40px, 6vw, 92px); height: 1px; background: var(--red); }
.sjv-title { max-width: 15ch; font-size: clamp(2.75rem, 5.6vw, 5.25rem); line-height: .99; letter-spacing: -.045em; }
.sjv-sub { max-width: 44ch; margin-top: clamp(18px, 3vh, 30px); color: var(--ink-2); font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); line-height: 1.42; }
.sjv-head .btn { margin-top: clamp(22px, 3.6vh, 38px); }

/* The step viewer */
.sjv-proc { padding-block: clamp(72px, 10vw, 136px); background: var(--night); color: var(--night-ink); overflow: clip; }
.sjv-proc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(40px, 5vw, 80px); }
.sjv-proc-media-frame { position: sticky; top: 104px; width: 100%; aspect-ratio: 1; max-height: 74vh; border: 1px solid var(--night-rule); border-radius: 26px; background: var(--night-2); overflow: hidden; }
/* The renders were lit blue. The filter turns that light into the theme's red. */
.sjv-proc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: hue-rotate(145deg) saturate(1.25); transform: scale(1.05); transition: opacity .7s ease, transform 1.3s var(--ease); }
.sjv-proc-img.is-active { opacity: 1; transform: scale(1); }
.sjv-proc-count { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 6px 14px; border-radius: 999px; background: rgba(11, 11, 13, .72); color: var(--night-ink-2); font-size: .875rem; font-variant-numeric: tabular-nums; }
.sjv-proc-count b { color: var(--white); font-weight: 500; }

.sjv-proc-steps { position: relative; padding-left: 34px; }
.sjv-proc-steps::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--red), var(--night-rule) 88%); }
.sjv-proc-step { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 64vh; padding-block: clamp(24px, 5vh, 40px); }
.sjv-proc-title { position: relative; font-size: clamp(1.875rem, 3vw, 2.875rem); }
.sjv-proc-title::before { content: ""; position: absolute; left: -34px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--red); transition: box-shadow .45s ease; }
.is-active > .sjv-proc-title::before { box-shadow: 0 0 22px 5px rgba(227, 19, 27, .55); }
.sjv-proc-lead { max-width: 44ch; margin-block: 12px 22px; color: var(--night-ink-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }

.sjv-contract { display: grid; max-width: 54ch; border: 1px solid var(--night-rule); border-radius: 20px; background: var(--night-2); }
.sjv-contract-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 18px; }
.sjv-contract-row + .sjv-contract-row { border-top: 1px solid var(--night-rule); }
.sjv-contract-row dt { color: var(--night-ink-2); font-size: .875rem; }
.sjv-contract-row dd { font-size: 1rem; line-height: 1.45; }

/* Wide screens dim the steps that are not active. Without JS every step stays at full strength. */
@media (min-width: 56.25rem) {
  .sjv-proc-js .sjv-proc-step { opacity: .72; transition: opacity .45s ease; }
  .sjv-proc-js .sjv-proc-step.is-active { opacity: 1; }
}

/* Closing */
.sjv-final { position: relative; isolation: isolate; padding-block: clamp(96px, 14vw, 184px); overflow: clip; }
.sjv-final-title { font-size: clamp(2.5rem, 5vw, 4.75rem); margin-bottom: clamp(24px, 3vw, 36px); }

@media (max-width: 56.1875rem) {
  .sjv-proc { padding-block: 0 72px; }
  .sjv-proc-grid { display: block; }
  /* The image pins under the header and swaps as the steps scroll past. */
  .sjv-proc-media { position: sticky; top: 68px; z-index: 4; padding-block: 16px; background: var(--night); }
  .sjv-proc-media-frame { position: relative; top: auto; aspect-ratio: 16 / 9; max-height: 30svh; border-radius: 20px; }
  .sjv-proc-img { object-position: 50% 45%; }
  .sjv-proc-step { min-height: 0; padding-block: 32px; }
}
@media (max-width: 35rem) {
  .sjv-contract-row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 16px; }
  .sjv-eyebrow { font-size: .75rem; letter-spacing: .14em; }
  .sjv-title { font-size: clamp(2.75rem, 12vw, 4rem); }
  .sjv-head { align-items: flex-start; min-height: 0; }
  .sjv-head__in { padding-block: 48px 180px; }
  .sjv-ridge { object-position: 78% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sjv-proc-img { transform: none; transition: opacity .2s linear; }
  .sjv-proc-img.is-active { transform: none; }
  .sjv-proc-title::before, .sjv-proc-js .sjv-proc-step { transition: none; }
}