/* =====================================================================
   Case studies (/work, /work/{slug}).
   Layout follows microsoft.com customer stories: tinted hero band,
   media-top story cards, pivot filter, "at a glance" sidebar, stat row,
   pull quote and a closing "Take the next step" band. Colour is the
   DV Soft logo purple (#602874) with lavender tints instead of blue/grey.
   ===================================================================== */

.wk-page {
  --wk-brand: #602874;
  --wk-brand-hover: #4d1f5e;
  --wk-tint: #f5f0f8;
  --wk-tint-2: #ebe1f0;
  --wk-ink: #1b1b1b;
  --wk-text: #262626;
  --wk-muted: #595959;
  --wk-line: #e3dce8;
  --wk-accent: var(--wk-brand);
  --wk-depth-4: 0 1.6px 3.6px 0 rgba(0, 0, 0, .13), 0 .3px .9px 0 rgba(0, 0, 0, .11);
  --wk-depth-16: 0 6.4px 14.4px 0 rgba(0, 0, 0, .13), 0 1.2px 3.6px 0 rgba(0, 0, 0, .11);
  color: var(--wk-text);
}
.wk-page h1, .wk-page h2, .wk-page h3 { color: var(--wk-ink); font-weight: 600; letter-spacing: -.01em; }

/* ---- Buttons and links ------------------------------------------- */
.wk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: 2px solid var(--wk-brand); border-radius: 4px;
  background: var(--wk-brand); color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wk-btn:hover { background: var(--wk-brand-hover); border-color: var(--wk-brand-hover); color: #fff; }
.wk-btn:focus-visible, .wk-link:focus-visible, .wk-pivot button:focus-visible, .wk-card-title a:focus-visible, .wk-chips a:focus-visible {
  outline: 2px solid var(--wk-ink); outline-offset: 2px;
}
.wk-btn-outline { background: transparent; color: var(--wk-brand); }
.wk-btn-outline:hover { background: var(--wk-brand); color: #fff; }
.wk-btn-block { display: flex; width: 100%; }
.wk-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wk-brand); font-weight: 600; }
.wk-link i, .wk-more i { font-size: .7em; transition: transform .2s ease; }
.wk-link:hover { color: var(--wk-brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.wk-link:hover i { transform: translateX(3px); }
.wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* ---- Hero --------------------------------------------------------- */
.wk-hero { background: var(--wk-tint); padding: 24px 0 56px; }
.wk-hero .breadcrumbs { margin-bottom: 24px; color: var(--wk-muted); }
.wk-hero .breadcrumbs a { color: var(--wk-muted); }
.wk-hero .breadcrumbs a:hover { color: var(--wk-brand); text-decoration: underline; }
.wk-hero .breadcrumbs [aria-current] { color: var(--wk-ink); }
.wk-hero-text { max-width: 760px; }
.wk-kicker { margin: 0 0 12px; font-size: .9rem; font-weight: 600; color: var(--wk-brand); }
.wk-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.25rem); line-height: 1.15; margin: 0 0 16px; }
.wk-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: #3d3d3d; margin: 0 0 24px; max-width: 680px; }

/* Story hero: text left, cover right */
.wk-story-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.wk-story-text .wk-client, .wk-story-text .wk-logo { margin-bottom: 14px; }
.wk-hero-story h1 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem); }
.wk-story-text .wk-lead { margin-bottom: 20px; }
.wk-story-media { border-radius: 8px; box-shadow: var(--wk-depth-16); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk-chips li, .wk-chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wk-line); font-size: .875rem; color: var(--wk-text);
}
.wk-chips li:has(> a) { padding: 0; border: 0; background: none; }
.wk-chips i { color: var(--wk-brand); font-size: .85em; }
.wk-chips a { color: var(--wk-brand); font-weight: 600; }
.wk-chips a:hover { border-color: var(--wk-brand); text-decoration: underline; }

/* ---- Sections ----------------------------------------------------- */
.wk-section { padding: 72px 0; }
.wk-section-tight { padding-bottom: 0; }
.wk-band { background: var(--wk-tint); }
.wk-h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); line-height: 1.2; margin: 0 0 24px; }
.wk-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.wk-list-head .wk-h2 { margin-bottom: 0; }
.wk-count { margin: 0; font-size: .9rem; color: var(--wk-muted); }

/* ---- Covers ------------------------------------------------------- */
.wk-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--wk-tint-2); }
.wk-cover img { width: 100%; height: 100%; object-fit: cover; }
.wk-art { background: var(--wk-accent); }
.wk-art-svg { display: block; width: 100%; height: 100%; }
.wk-art-compact { display: none; }

/* ---- Featured story: leads the grid (2 cols x 2 rows on desktop) ---- */
.wk-card-feature .wk-feature-media { flex: 1 0 auto; aspect-ratio: 640 / 460; }
.wk-card-feature .wk-card-body { flex: 0 0 auto; padding: 24px 32px 28px; }
.wk-feature-kicker { margin: 0; font-size: .875rem; font-weight: 600; color: var(--wk-brand); }
.wk-feature-client { color: var(--wk-muted); }
.wk-card-feature .wk-card-title { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.875rem); line-height: 1.22; margin: 8px 0 10px; }
.wk-feature-summary { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.55; color: #3d3d3d; }

/* ---- Pivot filter ------------------------------------------------- */
.wk-pivot { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 24px; border-bottom: 1px solid var(--wk-line); }
.wk-pivot[hidden] { display: none; }
.wk-pivot button {
  position: relative; padding: 10px 0 12px; border: 0; background: none; cursor: pointer;
  font-size: .95rem; color: var(--wk-text);
}
.wk-pivot button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.wk-pivot button:hover { color: var(--wk-brand); }
.wk-pivot button:hover::after { background: var(--wk-tint-2); }
.wk-pivot button[aria-pressed="true"] { color: var(--wk-ink); font-weight: 600; }
.wk-pivot button[aria-pressed="true"]::after { background: var(--wk-brand); }
/* Phones: one swipeable row instead of four wrapped rows; the end padding clears the floating buttons. */
@media (max-width: 720px) {
  .wk-pivot {
    flex-wrap: nowrap; gap: 0 24px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 2px 72px 0 2px; margin-inline: -2px;
    scroll-padding-inline: 2px 72px;
  }
  .wk-pivot::-webkit-scrollbar { display: none; }
  .wk-pivot button { flex: 0 0 auto; white-space: nowrap; }
  .wk-pivot button::after { bottom: 0; }
}

/* ---- Story cards -------------------------------------------------- */
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Column count follows the number of cards, so no row ends in empty slots. */
.wk-grid-n2, .wk-grid-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A single story becomes one wide card: cover beside the text. */
.wk-grid-n1 { grid-template-columns: minmax(0, 1fr); }
.wk-grid-n1:not(.wk-grid-feature) .wk-card { flex-direction: row; }
.wk-grid-n1:not(.wk-grid-feature) .wk-card > .wk-cover { flex: 0 0 52%; aspect-ratio: 16 / 9; }
.wk-grid-n1:not(.wk-grid-feature) .wk-card-body { justify-content: center; padding: 28px 32px; }
.wk-grid-n1 .wk-card:not(.wk-card-feature) .wk-more { margin-top: 8px; }
.wk-grid-feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-card-feature { grid-column: span 2; grid-row: span 2; }
.wk-grid-feature.wk-grid-n1 .wk-card-feature { grid-row: span 1; }
.wk-grid-feature.wk-grid-n0 .wk-card-feature { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
.wk-grid-n0 .wk-card-feature .wk-feature-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 320px; }
.wk-grid-n0 .wk-card-feature .wk-card-body { flex: 1 1 auto; justify-content: center; padding: 32px 40px; }
/* Three columns with the featured story: size it so the cards after it fill whole rows.
   2x2 for 2, 5 or 8 cards (default), 2x1 for 1, 4 or 7, and a full-width row for 0, 3, 6 or 9. */
@media (min-width: 961px) {
  .wk-grid-feature.wk-grid-n4 .wk-card-feature, .wk-grid-feature.wk-grid-n7 .wk-card-feature { grid-row: span 1; }
  .wk-grid-feature:is(.wk-grid-n3, .wk-grid-n6, .wk-grid-n9) .wk-card-feature { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
  .wk-grid-feature:is(.wk-grid-n3, .wk-grid-n6, .wk-grid-n9) .wk-card-feature .wk-feature-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 320px; }
  .wk-grid-feature:is(.wk-grid-n3, .wk-grid-n6, .wk-grid-n9) .wk-card-feature .wk-card-body { flex: 1 1 auto; justify-content: center; padding: 32px 40px; }
}
.wk-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 8px; box-shadow: var(--wk-depth-4); transition: box-shadow .2s ease;
}
.wk-card[hidden] { display: none; }
.wk-card:hover, .wk-card:focus-within { box-shadow: var(--wk-depth-16); }
.wk-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; }
.wk-client { display: block; font-size: .875rem; font-weight: 600; color: var(--wk-muted); }
.wk-logo { display: block; width: auto; max-width: 160px; height: 32px; object-fit: contain; object-position: left center; }
.wk-card-title { font-size: 1.25rem; line-height: 1.3; margin: 8px 0 8px; }
.wk-card-title a { color: var(--wk-ink); }
.wk-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wk-card:hover .wk-card-title a { color: var(--wk-brand); text-decoration: underline; text-underline-offset: 3px; }
.wk-meta { margin: 0 0 14px; font-size: .875rem; color: var(--wk-muted); }
.wk-card-metric { margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--wk-line); font-size: .9rem; color: var(--wk-muted); }
.wk-card-metric strong { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--wk-brand); }
.wk-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--wk-brand); }
.wk-card:hover .wk-more i { transform: translateX(3px); }

/* ---- Results stat row --------------------------------------------- */
.wk-results { padding: 56px 0 0; }
.wk-results + .wk-section { padding-top: 48px; }
.wk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wk-line); }
.wk-tiles-1 { grid-template-columns: minmax(0, 1fr); }
.wk-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wk-tile { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px 0 0; }
.wk-tile + .wk-tile { padding-left: 28px; border-left: 1px solid var(--wk-line); }
.wk-tile-value { font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--wk-accent); font-variant-numeric: tabular-nums; }
.wk-tile-label { font-size: 1rem; color: var(--wk-muted); max-width: 260px; }

/* ---- Article: at-a-glance sidebar + prose -------------------------- */
.wk-article { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.wk-glance { position: sticky; top: calc(var(--header-h, 68px) + 24px); padding: 24px; border-radius: 8px; background: var(--wk-tint); }
.wk-glance h2 { font-size: 1.125rem; margin: 0 0 16px; }
.wk-glance dl { margin: 0 0 24px; }
.wk-glance dl > div { padding: 12px 0; border-top: 1px solid var(--wk-line); }
.wk-glance dt { font-size: .8rem; font-weight: 600; color: var(--wk-muted); margin-bottom: 2px; }
.wk-glance dd { margin: 0; font-size: .95rem; color: var(--wk-ink); }
.wk-glance dd ul { margin: 0; padding: 0; list-style: none; }
.wk-glance dd li + li { margin-top: 2px; }
.wk-glance dd a { color: var(--wk-brand); font-weight: 600; }
.wk-glance dd a:hover { text-decoration: underline; }
.wk-prose { max-width: 740px; }
.wk-prose section + section, .wk-prose section + .wk-quote, .wk-prose .wk-quote + section { margin-top: 40px; }
.wk-prose h2 { font-size: clamp(1.45rem, 1.25rem + .7vw, 1.875rem); margin: 0 0 16px; }
.wk-prose p { font-size: 1.0625rem; line-height: 1.75; color: var(--wk-text); margin: 0 0 1.1em; }
.wk-prose p:last-child { margin-bottom: 0; }

.wk-quote { margin: 40px 0 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--wk-accent); }
.wk-quote blockquote { margin: 0; }
.wk-quote blockquote p { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.45; font-weight: 600; color: var(--wk-ink); margin: 0; }
.wk-quote figcaption { display: flex; flex-direction: column; margin-top: 18px; font-size: .95rem; }
.wk-quote figcaption strong { color: var(--wk-ink); }
.wk-quote figcaption span { color: var(--wk-muted); }

/* ---- Empty state + next step -------------------------------------- */
.wk-empty { max-width: 640px; padding: 48px; border-radius: 8px; background: #fff; box-shadow: var(--wk-depth-4); }
.wk-empty h2 { font-size: 1.6rem; margin: 0 0 12px; }
.wk-empty p { color: #3d3d3d; margin: 0 0 24px; }
.wk-next { padding: 0 0 72px; }
.wk-band + .wk-next { padding-top: 72px; }
.wk-next-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap;
  padding: 40px 48px; border-radius: 8px; background: var(--wk-tint);
}
.wk-next-inner h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); margin: 0 0 8px; }
.wk-next-inner p { margin: 0; max-width: 560px; color: #3d3d3d; }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 1080px) {
  .wk-article { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 960px) {
  .wk-grid, .wk-grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-grid-n1, .wk-grid-feature.wk-grid-n1 { grid-template-columns: minmax(0, 1fr); }
  .wk-grid-n1 .wk-card:not(.wk-card-feature) { flex-direction: row; }
  .wk-grid-n1 .wk-card:not(.wk-card-feature) > .wk-cover { flex: 0 0 52%; aspect-ratio: 16 / 9; }
  .wk-grid-n1 .wk-card:not(.wk-card-feature) .wk-card-body { justify-content: center; padding: 24px; }
  .wk-section { padding: 56px 0; }
  .wk-results + .wk-section { padding-top: 40px; }
  .wk-next { padding-bottom: 56px; }
  .wk-band + .wk-next { padding-top: 56px; }
  /* Featured story: full-width row, art beside the text. */
  .wk-card-feature, .wk-grid-feature.wk-grid-n1 .wk-card-feature { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
  .wk-card-feature .wk-feature-media, .wk-grid-n0 .wk-card-feature .wk-feature-media { flex: 0 0 54%; aspect-ratio: auto; min-height: 0; }
  .wk-card-feature .wk-card-body, .wk-grid-n0 .wk-card-feature .wk-card-body { flex: 1 1 auto; justify-content: center; padding: 24px; }
  .wk-feature-media .wk-art-wide { display: none; }
  .wk-feature-media .wk-art-compact { display: block; }
  .wk-story-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wk-story-media { max-width: 640px; }
  .wk-article { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wk-glance { position: static; order: 2; }
  .wk-glance dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .wk-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wk-hero { padding: 20px 0 44px; }
  .wk-hero .breadcrumbs { margin-bottom: 20px; }
  .wk-section { padding: 44px 0; }
  .wk-section-tight { padding-bottom: 0; }
  .wk-results { padding-top: 44px; }
  .wk-results + .wk-section { padding-top: 32px; }
  .wk-next { padding-bottom: 44px; }
  .wk-band + .wk-next { padding-top: 44px; }
  .wk-card-feature { flex-direction: column; }
  .wk-card-feature .wk-feature-media, .wk-grid-n0 .wk-card-feature .wk-feature-media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .wk-card-feature .wk-card-body, .wk-grid-n0 .wk-card-feature .wk-card-body { padding: 20px 24px 24px; }
  .wk-tiles, .wk-tiles-2, .wk-tiles-4 { grid-template-columns: minmax(0, 1fr); }
  /* Stacked results read as compact rows: figure left, label right. */
  .wk-tile, .wk-tile + .wk-tile { flex-direction: row; align-items: center; gap: 16px; padding: 14px 0; border-left: 0; }
  .wk-tile-value { flex: 0 0 44%; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); overflow-wrap: anywhere; }
  .wk-tile-label { font-size: .95rem; }
  .wk-tile + .wk-tile { border-top: 1px solid var(--wk-line); }
  .wk-empty { padding: 28px 24px; }
  .wk-next-inner { padding: 28px 24px; }
}
@media (max-width: 640px) {
  .wk-story-media .wk-art-wide { display: none; }
  .wk-story-media .wk-art-compact { display: block; }
  .wk-grid, .wk-grid-feature { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wk-grid-n1 .wk-card:not(.wk-card-feature) { flex-direction: column; }
  .wk-grid-n1 .wk-card:not(.wk-card-feature) > .wk-cover { flex: 0 0 auto; }
  .wk-grid-n1 .wk-card:not(.wk-card-feature) .wk-card-body { padding: 20px 24px 24px; }
  .wk-glance dl { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-btn, .wk-card, .wk-link i, .wk-more i { transition: none; }
}