/* Selected work: one screen that never moves. The list on the left is a
   stepper, the frame on the right stays put and only its picture changes.
   Which work is showing lives on <html data-work> (work-stepper.js), because
   the page runtime redraws the panel. Everything that changes reads the
   variables set by this one selector list. */
html:not([data-work]) [data-work-on="1"],
html[data-work="1"] [data-work-on="1"],
html[data-work="2"] [data-work-on="2"],
html[data-work="3"] [data-work-on="3"],
html[data-work="4"] [data-work-on="4"],
html[data-work="5"] [data-work-on="5"],
html[data-work="6"] [data-work-on="6"] {
  --ws-show: 1;
  --ws-vis: visible;
  --ws-title: rgb(var(--ink-rgb, 32, 31, 29));
  --ws-node: var(--ws-tone, var(--pf-accent, #E3B400));
}
html[data-tone="yellow"] { --ws-tone: #FDDA24; }

/* the panel is exactly one screen and centres its content. The sticky header
   slides away on the way down, so the panel starts at the very top. */
html body .pnl#work:not(#_) {
  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 24px !important; padding-bottom: 24px !important;
  scroll-margin-top: 0 !important;
}

.ws { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: center; scroll-margin-top: var(--hdr, 92px); }

/* the stepper */
.ws-steps { list-style: none; margin: 0; padding: 0; }
.ws-steps li { position: relative; }
/* the rail: a segment from each node to the next */
.ws-steps li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: calc(50% + 12px); height: calc(100% - 24px); width: 1px; background: rgba(var(--ink-rgb, 32, 31, 29), .24); pointer-events: none; }
.ws-go { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 8px 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ws-title, rgba(var(--ink-rgb, 32, 31, 29), .62)); transition: color .2s; }
.ws-go:hover { color: rgb(var(--ink-rgb, 32, 31, 29)); }
.ws-go:focus-visible, .ws-open:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html body .ws-node:not(#_) { position: relative; flex: none; box-sizing: border-box; width: 15px; height: 15px; border-radius: 50% !important; border: 1px solid var(--ws-node, rgba(var(--ink-rgb, 32, 31, 29), .42)); transition: border-color .2s; }
html body .ws-node:not(#_)::after { content: ""; position: absolute; inset: 3px; border-radius: 50% !important; background: var(--ws-node, transparent); transition: background-color .2s; }
.ws-name { font-family: Schibsted Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }

/* the frame: same place and size for every piece of work */
.ws-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 2880 / 2100; max-height: calc(100svh - var(--hdr, 92px) - 216px); background: var(--frame, #e7e5de); }
.ws-shot { --stage: var(--frame, #e7e5de); position: absolute; inset: 0; display: block; overflow: hidden; background: var(--stage); }

/* each work keeps its own composition inside the frame: layered screens on
   its tile or photo. The important flags answer the site wide image resets. */
html body .ws-shot img:not(#_) { position: absolute; display: block; height: auto; margin: 0; z-index: 1; object-fit: contain; object-position: top left; background: var(--surface, #fff); border-radius: 6px !important; }
html body .ws-shot img.ws-front:not(#_) { z-index: 2; top: 16%; left: 9%; width: 80%; border: 6px solid #fff !important; border-radius: 10px !important; box-shadow: 0 30px 60px -24px rgba(20, 19, 18, .55); }

/* 1 Modernizing Operations */
.ws-shot[data-work-on="1"] { --stage: #D9E7F1; }
html[data-theme="dark"] .ws-shot[data-work-on="1"] { --stage: color-mix(in srgb, #201f1d 7%, var(--frame, #e7e5de)); }
html body .ws-shot[data-work-on="1"] img.ws-back:not(#_) { top: 10%; left: 30%; width: 66%; border: 6px solid #fff !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(20, 19, 18, .2), 0 28px 56px -18px rgba(20, 19, 18, .6); }
html body .ws-shot[data-work-on="1"] img.ws-front:not(#_) { top: 30%; left: 6%; width: 58%; box-shadow: 0 2px 8px rgba(20, 19, 18, .24), 0 32px 64px -18px rgba(20, 19, 18, .72); }

/* 2 Smarter Marketing Investment */
.ws-shot[data-work-on="2"] { background: url(img/work/bg/collage-mmm-ground.jpg) center / cover no-repeat; }
.ws-shot[data-work-on="2"]::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .1); pointer-events: none; }
html body .ws-shot[data-work-on="2"] img.ws-front:not(#_) { top: 9%; left: 11%; width: 78%; box-shadow: 0 30px 60px -28px rgba(20, 19, 18, .45); }

/* 3 Untangling Resiliency */
html:not([data-theme="dark"]) .ws-shot[data-work-on="3"] { --stage: #D9E7F1; }
.ws-shot[data-work-on="3"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(32, 31, 29, .2) 1.4px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask-image: radial-gradient(130% 120% at 50% 50%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%); mask-image: radial-gradient(130% 120% at 50% 50%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%); }
html[data-theme="dark"] .ws-shot[data-work-on="3"]::before { background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1.4px, transparent 1.6px); }
html body .ws-shot[data-work-on="3"] img.ws-front:not(#_) { top: 24%; left: 8%; width: 50%; border: 0 !important; border-radius: 8px !important; box-shadow: 0 12px 28px -18px rgba(20, 19, 18, .35); }
html body .ws-shot[data-work-on="3"] img.ws-back:not(#_) { top: 9%; left: 60.5%; width: 42%; background: none; border-radius: 0 !important; }
@media (max-width: 1100px) {
  html body .ws-shot[data-work-on="3"] img.ws-front:not(#_) { top: 28%; }
  html body .ws-shot[data-work-on="3"] img.ws-back:not(#_) { top: 15%; }
}

/* 4 Streamlining Medical Records */
.ws-shot[data-work-on="4"]::before { content: ""; position: absolute; inset: 0; background: url(img/work/bg/photo-medical.jpg) center / cover no-repeat; opacity: .9; }
html[data-theme="dark"] .ws-shot[data-work-on="4"]::before { opacity: .45; }

/* 5 Embedded Finance */
.ws-shot[data-work-on="5"] { --fade: 10%; background: linear-gradient(color-mix(in srgb, var(--stage) var(--fade), transparent) 0 0), url(img/work/bg/photo-embedded-finance.jpg) center / cover no-repeat, var(--stage); }
html[data-theme="dark"] .ws-shot[data-work-on="5"] { --fade: 55%; }
html body .ws-shot[data-work-on="5"] img.ws-front:not(#_) { top: 19%; left: 8%; width: 84%; }
@media (max-width: 900px) { html body .ws-shot[data-work-on="5"] img.ws-front:not(#_) { top: 14%; } }

/* 6 Leave of Absence */
.ws-shot[data-work-on="6"]::before { content: ""; position: absolute; inset: 0; background: url(img/work/bg/photo-leave.jpg) center / cover no-repeat; opacity: .9; }
html[data-theme="dark"] .ws-shot[data-work-on="6"]::before { opacity: .45; }
html body .ws-shot[data-work-on="6"] img.ws-front:not(#_) { width: 82%; }

/* the details: stacked in one cell, so the tallest holds the space and
   nothing moves when the work changes */
.ws-side { display: grid; }
.ws-card { grid-area: 1 / 1; display: flex; flex-direction: column; border: 1px solid rgba(var(--ink-rgb, 32, 31, 29), .24); background: var(--flat-tint, transparent); opacity: var(--ws-show, 0); visibility: var(--ws-vis, hidden); transition: opacity .35s ease, visibility .35s; }
.ws-title { display: none; }
.ws-meta { display: block; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink-rgb, 32, 31, 29), .6); }
/* one card: the description and metrics side by side, the links in a footer
   row. The stretchy second row keeps that footer in the same place for all. */
.ws-cap { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto 1fr auto auto auto; column-gap: 24px; padding: 20px 24px 0; border-top: 1px solid rgba(var(--ink-rgb, 32, 31, 29), .24); }
.ws-meta { grid-column: 1 / -1; }
.ws-line { grid-column: 1; grid-row: 2; margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: rgba(var(--ink-rgb, 32, 31, 29), .78); }
.ws-foot { display: contents; }
.ws-metrics { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 4px; align-self: start; margin-top: 8px; padding-left: 24px; border-left: 1px solid rgba(var(--ink-rgb, 32, 31, 29), .24); font-size: 14px; font-weight: 500; line-height: 1.5; color: rgb(var(--ink-rgb, 32, 31, 29)); }
.ws-metrics:empty { border-left: 0; }
.ws-open { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding-bottom: 4px; color: rgb(var(--ink-rgb, 32, 31, 29)); border-bottom: 1px solid var(--pf-accent, #E3B400); }
html[data-tone="yellow"] .ws-open { border-bottom-color: #FDDA24; }
.ws-links { grid-column: 1 / -1; grid-row: 5; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px -24px 0; padding: 12px 24px 14px; border-top: 1px solid rgba(var(--ink-rgb, 32, 31, 29), .24); }
.ws-demo { border-bottom-color: rgba(var(--ink-rgb, 32, 31, 29), .3); color: rgba(var(--ink-rgb, 32, 31, 29), .72); }
html[data-tone="yellow"] .ws-demo { border-bottom-color: rgba(var(--ink-rgb, 32, 31, 29), .3); }
.ws-cap .desk-note { grid-column: 1 / -1; grid-row: 4; margin: 8px 0 0; }
@media (max-width: 1100px) {
  .ws-cap { grid-template-columns: minmax(0, 1fr); }
  .ws-metrics { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; gap: 4px 24px; padding-left: 0; border-left: 0; }
}
/* marks the works with a demo you can try, in the same pill as the Work menu */
.ws-name .tag, .ws-title .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: middle; border: 1px solid #E3B400; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; font-style: normal; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgb(var(--ink-rgb, 32, 31, 29)); }

@media (prefers-reduced-motion: reduce) { .ws-card, .ws-go, html body .ws-node:not(#_), html body .ws-node:not(#_)::after { transition: none; } }

/* phones: the cards become a native swipe row with the next one peeking in,
   each card carries its title, and the stepper turns into a row of dots
   under it. --ws-bleed cancels the panel padding so the row reaches its edge. */
@media (max-width: 760px) {
  html body .pnl#work:not(#_) { padding-top: 12px !important; padding-bottom: 12px !important; --ws-bleed: 28px; }
  .ws { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ws-list { display: contents; }
  .ws-heading { order: -2; margin: 0; }
  .ws-side { order: -1; display: flex; gap: 12px; margin: 0 calc(var(--ws-bleed) * -1); padding: 0 var(--ws-bleed); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ws-bleed); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ws-side::-webkit-scrollbar { display: none; }
  .ws-card { flex: 0 0 min(calc(100% - 24px), 440px); box-sizing: border-box; scroll-snap-align: start; opacity: 1; visibility: visible; }
  .ws-frame { max-height: none; }
  .ws-meta, .ws-metrics, .ws-long { display: none; }
  .ws-cap { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 0; }
  .ws-title { display: block; grid-column: 1; grid-row: 1; margin: 0; font-family: Schibsted Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: rgb(var(--ink-rgb, 32, 31, 29)); }
  .ws-title .tag { margin-left: 0; }
  .ws-line { margin-top: 8px; font-size: 15px; }
  .ws-open { font-size: 11px; letter-spacing: .06em; }
  .ws-links { flex-wrap: wrap; gap: 8px 16px; margin: 12px -16px 0; padding: 12px 16px; }
  .ws-steps { display: flex; justify-content: center; }
  .ws-go { justify-content: center; width: 40px; min-height: 44px; padding: 0; }
  .ws-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ws-steps li:not(:last-child)::after { left: calc(50% + 12px); top: 50%; width: calc(100% - 24px); height: 1px; }
}
@media (max-width: 600px) { html body .pnl#work:not(#_) { --ws-bleed: 20px; } }