/* Case study design system. Loaded only by the case study pages (after styles.css), so the home
   page is untouched. Values come from design-system/DESIGN_SYSTEM.md. Exposure and Söhne are paid
   fonts, so Fraunces and Hanken Grotesk stand in for them at the system's sizes and tracking;
   Departure Mono is free (OFL) and served locally. */

@font-face {
  font-family: "Departure Mono";
  src: url("assets/case/departure-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.case-page {
  /* System tokens */
  --surface-page: #fffbf4;
  --surface-card: #f5f0e8;
  --text-headings: #2b2b2b;
  --text-body: rgb(43 43 43 / 0.9);
  --text-muted: #746960;
  --divider: #dadada;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 240ms;
  --duration-base: 400ms;
  --duration-reveal: 700ms;
  --shadow-pill: 0 4px 10px rgb(71 71 71 / 0.1), 0 18px 18px rgb(71 71 71 / 0.09);
  --pill-fill: linear-gradient(rgb(22 20 15 / 0.9), rgb(12 10 6 / 0.94));
  /* About 80 characters per line at 16px: longer than before, still comfortable to read. */
  --reading: 640px;
  --wide: min(960px, calc(100vw - 128px));

  /* Studio defaults follow the system; the studio can still override them. */
  --cs-bg: var(--surface-page);
  --cs-accent: var(--text-muted);
  --cs-label: "Departure Mono", ui-monospace, Menlo, monospace;

  /* Map the site's color names onto the system on this page only. */
  --paper: var(--text-headings);
  --mist: var(--text-muted);
  --dim: #cacaca;
  --card: var(--surface-card);
  color: var(--text-body);
  background: var(--cs-bg);
}

@media (max-width: 1180px) {
  .case-page {
    --wide: min(960px, calc(100vw - 96px));
  }
}

@media (max-width: 1023px) {
  .case-page {
    --wide: min(960px, calc(100vw - 48px));
  }
}

/* ---------- background: base, vellum, paper, surface, grain ---------- */

.case-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.case-bg > div {
  position: absolute;
  inset: 0;
}

.case-bg__base {
  background: var(--cs-bg);
}

.case-bg__vellum {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-color: var(--cs-bg);
  background-blend-mode: multiply;
  opacity: calc(0.08 * var(--cs-sys, 1));
}

.case-bg__paper {
  background: url("assets/case/paper.webp") 50% / cover;
  opacity: calc(0.08 * var(--cs-sys, 1));
}

.case-bg__surface {
  /* Blended with the page color inside this layer, so the gray photo never shows on its own. */
  background: url("assets/case/surface.webp") 50% / cover, var(--cs-bg);
  background-blend-mode: overlay;
  opacity: calc(0.5 * var(--cs-sys, 1));
}

.case-bg__grain {
  inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-color: var(--cs-bg);
  background-blend-mode: multiply;
  opacity: calc(0.04 * var(--cs-sys, 1));
  animation: case-grain 8s linear infinite;
}

@keyframes case-grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2%, 1%);
  }
  50% {
    transform: translate(1%, -1%);
  }
  75% {
    transform: translate(-1%, 2%);
  }
}

/* The system's layers replace the studio's single texture unless another texture is picked. */
.case-page:not([data-texture="system"]) .case-bg > :not(.case-bg__base) {
  display: none;
}

.case-page[data-texture="system"]::before {
  display: none;
}

/* Content sits above the background. */
.case-hero,
.case-layout,
.case-page .site-footer {
  position: relative;
  z-index: 2;
}

/* ---------- top bar and title ---------- */

.case-page .case-bar {
  background: color-mix(in srgb, var(--cs-bg) 86%, transparent);
}

.case-hero__title {
  max-width: 537px;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.16px;
  color: var(--text-headings);
  text-wrap: balance;
}

.case-hero__label {
  padding: 0;
  background: none;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  color: var(--text-muted);
}

.case-hero__sub {
  margin-top: 24px;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  color: var(--text-muted);
}

.case-hero__meta {
  width: var(--wide);
  max-width: none;
  margin-top: 48px;
  gap: 24px;
  border-top-color: var(--divider);
}

.case-hero__meta dt {
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
}

.case-hero__meta dd {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: var(--text-body);
}

.case-hero__img {
  width: var(--wide);
  margin-top: 64px;
  border-radius: 8px;
}

/* ---------- reading column and wide blocks ---------- */

.case-layout {
  padding: 80px 0 80px;
}

.case-body {
  max-width: var(--reading);
}

.case-body .case-pair,
.case-body .case-media,
.case-body .case-cards,
.case-body .case-flow--mobile,
.case-body .case-stats {
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
}

.case-section {
  padding-bottom: 80px;
}

/* Body: the system's large body size (16 / 24). */
.case-body p,
.case-body li,
.case-body dd {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
}

.case-body p {
  margin: 0 0 16px;
}

.case-lede {
  font-size: 16px !important;
}

/* Labels: Departure Mono, 12 / 16.8, uppercase, muted. */
.case-eyebrow,
.case-body h3:not(.case-sub),
.case-tags li,
.case-insight span,
.case-quotes figcaption {
  font-size: 12px !important;
  line-height: 16.8px !important;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.case-eyebrow {
  margin-bottom: 12px !important;
}

/* Headings: 24 / 32. */
.case-body h2,
.case-body h3.case-sub {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.16px;
  color: var(--text-headings);
}

.case-body h2 {
  margin-bottom: 24px;
}

.case-body h3:not(.case-sub) {
  margin: 36px 0 12px;
  font-weight: 400;
}

.case-body h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-headings);
}

.case-flow {
  margin-top: 64px;
}

.case-sub:not(:first-child) {
  margin-top: 64px;
}

.case-list li::marker,
.case-steps li::marker {
  color: var(--text-muted);
}

/* ---------- panels: a faint dark tint with a paper overlay, no shadow ---------- */

.case-card,
.case-stats li,
.case-callout,
.case-quotes figure {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 0;
  border-radius: 8px;
  background: rgb(14 7 2 / 0.036);
  box-shadow: none;
}

.case-card::before,
.case-stats li::before,
.case-callout::before,
.case-quotes figure::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/case/paper.webp") 0 0 / 600px repeat;
  mix-blend-mode: multiply;
  opacity: 0.08;
}

.case-card > *,
.case-stats li > *,
.case-callout > *,
.case-quotes figure > * {
  position: relative;
}

.case-cards,
.case-stats,
.case-quotes {
  gap: 16px;
}

.case-card h4 {
  margin: 0 0 8px;
}

.case-card p {
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0.28px;
}

.case-insight {
  border-top-color: var(--divider);
}

.case-stats strong {
  font-size: 40px;
  line-height: 48px;
  color: var(--text-headings);
}

.case-stats li > span {
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0.28px;
  color: var(--text-muted);
}

.case-quotes blockquote {
  font-size: 24px;
  line-height: 32px;
  color: var(--text-headings);
}

.case-tags li {
  border-color: var(--divider);
}

.case-learned,
.case-learned div {
  border-color: var(--divider);
}

.case-learned dt {
  font-size: 24px;
  line-height: 32px;
  color: var(--text-headings);
}

/* Screens */
.case-media {
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
}

.case-media img,
.case-pair img {
  border-radius: 8px;
}

/* ---------- navigation ---------- */

.case-nav a {
  font-size: 12px;
  /* A whole-pixel line keeps every item on whole pixels, so each square bullet centers on its text. */
  line-height: 16px;
  letter-spacing: 0.16px;
}

.case-pill {
  background: var(--pill-fill);
  box-shadow: var(--shadow-pill);
}

.case-pill span {
  letter-spacing: 0.16px;
}

/* The footer matches the homepage's colors, without the blossom (the copyright sits under the line). */
.case-page .site-footer {
  --paper: #262320;
  --mist: #5a544c;
  --dim: #a69d8e;
}

/* Its top line spans the same width as the top bar, from "zahra" on the left to "contact" on the
   right, and the footer's content lines up with both ends of the line. */
.case-page .site-footer {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.case-page .site-footer::before {
  left: var(--gutter);
  right: var(--gutter);
}

.case-page :focus-visible {
  outline: 2.5px solid var(--text-headings);
  outline-offset: 2px;
}

/* ---------- reveal: fade up 6px with a soft blur ---------- */

.case-reveal {
  opacity: 0;
  translate: 0 6px;
  filter: blur(4px);
  transition:
    opacity var(--duration-reveal) var(--ease-standard),
    translate var(--duration-reveal) var(--ease-standard),
    filter var(--duration-reveal) var(--ease-standard);
}

.case-reveal.is-in {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

/* ---------- small screens ---------- */

@media (max-width: 1023px) {
  .case-bg__grain {
    animation: none;
  }

  .case-layout {
    padding-inline: 24px;
  }
}

@media (max-width: 767px) {
  .case-hero__title {
    font-size: 28px;
    line-height: 33.6px;
  }

  .case-hero__meta {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-bg__grain {
    animation: none;
  }

  .case-reveal {
    translate: none;
    filter: none;
    transition: opacity 200ms ease;
  }
}

/* ---------- Problem: story beats, the scale line, the existing flow, the turn ---------- */

/* Each beat of the story is tagged with the step it maps to in the flow below. */
.pb-story {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}

.pb-beat {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
}

.case-body .pb-beat p {
  grid-column: 2;
  margin: 0;
}

.pb-beat {
  row-gap: 8px;
}

.pb-beat__tag {
  padding-top: 4px;
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.pb-beat.is-linked .pb-beat__tag {
  color: var(--text-headings);
}

/* The scale line reads as a statement, with the number underlined in a soft marker. */
.case-body .pb-scale {
  margin: 48px 0 0;
  font-family: var(--cs-display);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.16px;
  color: var(--text-headings);
}

.pb-scale strong {
  font-weight: inherit;
  background: linear-gradient(transparent 62%, rgb(116 105 96 / 0.22) 62%);
}

/* The existing flow: five steps that light up in order, with the line between them filling. */
.case-body .pb-flow {
  position: relative;
  width: min(100%, 640px);
  margin: 48px 0 0 calc((100% - min(100%, 640px)) / 2);
  padding: 24px;
  border-radius: 8px;
  background: rgb(14 7 2 / 0.036);
  overflow: hidden;
}

.pb-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/case/paper.webp") 0 0 / 600px repeat;
  mix-blend-mode: multiply;
  opacity: 0.08;
}

.pb-flow > * {
  position: relative;
}

.pb-flow__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 24px;
  margin-bottom: 24px;
}

.case-body .pb-flow__title {
  margin: 0;
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pb-flow__replay {
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--cs-label);
  font-size: 12px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.pb-flow__replay:hover {
  color: var(--text-headings);
}

.pb-flow__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-step {
  --fill: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.36;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pb-step.is-on {
  opacity: 1;
}

/* The line to the next step: a divider-colored track with a dark fill that grows when this step lights. */
.pb-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 48px;
  width: calc(100% - 48px + 16px - 4px);
  height: 1px;
  background:
    linear-gradient(var(--text-headings), var(--text-headings)) 0 0 / var(--fill) 100% no-repeat,
    var(--divider);
  transition: background-size 500ms var(--ease-standard);
}

.pb-step.is-on:not(:last-child)::after {
  --fill: 100%;
}

.pb-step__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 8px;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: var(--cs-bg);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
  color: var(--text-headings);
}

.pb-step__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-step.is-on .pb-step__icon {
  border-color: var(--text-headings);
}

/* Where it goes wrong: the delay and the rework fill in dark. */
.pb-step--risk.is-on .pb-step__icon {
  background: var(--text-headings);
  color: var(--surface-page);
}

.pb-step__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-headings);
}

.pb-step__desc {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
}

.pb-step.is-linked .pb-step__icon {
  border-color: var(--text-headings);
  box-shadow: 0 0 0 4px rgb(43 43 43 / 0.08);
}

.case-body .pb-flow figcaption {
  margin-top: 24px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: var(--text-muted);
}

/* The turn: the misread, then what was really wrong. */
.pb-insight {
  margin-top: 64px;
  padding-left: 24px;
  border-left: 1px solid var(--text-headings);
}

.case-body .pb-insight p {
  margin: 0;
  color: var(--text-muted);
}

.case-body .pb-insight .pb-insight__turn {
  margin-top: 8px;
  font-family: var(--cs-display);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.16px;
  color: var(--text-headings);
}

/* Phones: the flow runs top to bottom, the beat tags sit above their text. */
@media (max-width: 720px) {
  .pb-beat {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .case-body .pb-beat p {
    grid-column: 1;
  }

  .pb-flow__steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pb-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
  }

  .pb-step__icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin: 0;
  }

  .pb-step__name,
  .pb-step__desc {
    grid-column: 2;
  }

  .pb-step:not(:last-child)::after {
    top: 40px;
    left: 20px;
    width: 1px;
    height: calc(100% - 40px + 16px);
    background:
      linear-gradient(var(--text-headings), var(--text-headings)) 0 0 / 100% var(--fill) no-repeat,
      var(--divider);
  }

}

@media (prefers-reduced-motion: reduce) {
  .pb-step,
  .pb-step::after,
  .pb-step__icon {
    transition: none;
  }

}

/* ---------- Solution: the proposed workflow ---------- */

.case-body .sf-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 640px);
  margin: 32px 0 0 calc((100% - min(100%, 640px)) / 2);
  padding: 32px 24px;
  border-radius: 8px;
  background: rgb(14 7 2 / 0.036);
  overflow: hidden;
}

.sf-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/case/paper.webp") 0 0 / 600px repeat;
  mix-blend-mode: multiply;
  opacity: 0.08;
}

.sf-flow > * {
  position: relative;
}

.sf-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(100%, 320px);
  padding: 16px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--cs-bg);
  text-align: center;
}

.sf-node__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgb(14 7 2 / 0.05);
  color: var(--text-headings);
}

.sf-node--engine .sf-node__icon {
  background: var(--text-headings);
  color: var(--surface-page);
}

.sf-node__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-node__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-headings);
}

.sf-node__desc {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
}

/* Connectors */
.sf-line {
  display: block;
  width: 1px;
  height: 32px;
  background: var(--text-headings);
  transform-origin: top;
}

/* The fork: one line down, then across to the centers of the two branches. */
.sf-fork {
  position: relative;
  display: block;
  /* Spans the two branch centers: half the width plus half the gap between branches. */
  width: calc(50% + 8px);
  height: 24px;
  transform-origin: top;
}

.sf-fork::before,
.sf-fork::after {
  content: "";
  position: absolute;
  background: var(--text-headings);
}

.sf-fork::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: 12px;
}

.sf-fork::after {
  top: 12px;
  left: 0;
  right: 0;
  height: 1px;
}

.sf-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.sf-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity var(--duration-base) var(--ease-standard);
}

/* The short drop from the fork into each branch. */
.sf-drop {
  display: block;
  width: 1px;
  height: 12px;
  margin-top: -12px;
  background: var(--text-headings);
  transform-origin: top;
}

.sf-branch__label {
  padding: 8px 0;
  font-family: var(--cs-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: var(--text-muted);
}

.sf-branch .sf-line {
  height: 24px;
}

.sf-node--end {
  width: 100%;
}

/* Build-in: each piece appears in order the first time the chart comes into view. */
.sf-flow.is-ready [data-seq] {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.sf-flow.is-ready .sf-node[data-seq],
.sf-flow.is-ready .sf-branch__label[data-seq] {
  transform: translateY(6px);
}

.sf-flow.is-ready .sf-line[data-seq],
.sf-flow.is-ready .sf-drop[data-seq],
.sf-flow.is-ready .sf-fork[data-seq] {
  transform: scaleY(0);
}

.sf-flow.is-ready [data-seq].is-on {
  opacity: 1;
  transform: none;
}

.case-body .sf-decision {
  margin-top: 32px;
}

@media (max-width: 520px) {
  .case-body .sf-flow {
    padding: 16px 16px 24px;
  }

  .sf-branches {
    gap: 8px;
  }

  .sf-node {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-flow.is-ready [data-seq] {
    transition: opacity 200ms ease;
    transform: none !important;
  }
}

/* ---------- Solution: grouped by who uses each flow ---------- */

.case-group {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}

/* Same look and spacing as the section eyebrows: muted label, 12px above its title. */
.case-body .case-group__eyebrow {
  margin: 0 0 12px;
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The first flow in each group sits closer to its eyebrow. */
.case-group > .case-flow:first-of-type {
  margin-top: 0;
}

/* ---------- side nav: Solution's sub-items ---------- */

.case-group {
  scroll-margin-top: 96px;
}

/* Collapsed until you're in Solution, then they open beneath it. */
/* Indented under Solution so they start where "Solution" starts once its pixel has pushed it in. */
.case-nav .case-nav__sub {
  max-height: 0;
  margin: 0 0 4px;
  padding: 0 0 0 14px;
  overflow: hidden;
  list-style: none;
  opacity: 0;
  transition:
    max-height var(--duration-base) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.case-sub-open .case-nav .case-nav__sub {
  max-height: 160px;
  opacity: 1;
}

.case-nav .case-nav__sub a {
  padding-block: 4px;
  color: var(--text-muted);
}

.case-nav .case-nav__sub a:hover,
.case-nav .case-nav__sub a[aria-current] {
  color: #207b54;
}

/* Sub-items start right under the "S" of Solution with no bullet. The one you're on gets a small
   pixel at that same edge, and its label slides over to make room, like the main items. */
.case-nav .case-nav__sub a {
  padding-left: 0;
}

.case-nav .case-nav__sub a[aria-current] {
  padding-left: 12px;
}

.case-nav .case-nav__sub a::before {
  width: 4px;
  height: 4px;
  top: calc(50% - 2px);
  background: var(--cs-accent);
}

/* While the side nav shows, keep wide screens and cards clear of it. */
@media (min-width: 1320px) {
  .case-page {
    --wide: min(960px, calc(100vw - 2 * (var(--gutter) + 160px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-nav__sub {
    transition: none;
  }
}

/* ---------- Trade-offs: each one names the tension, then how the design resolved it ---------- */

.to-list {
  display: grid;
  gap: 16px;
}

.to-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 8px;
  background: rgb(14 7 2 / 0.036);
}

.to-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/case/paper.webp") 0 0 / 600px repeat;
  mix-blend-mode: multiply;
  opacity: 0.08;
}

.to-card > * {
  position: relative;
}

.case-body .to-card__num,
.case-body .to-card__label {
  margin: 0 0 8px;
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The two sides of the trade-off, with a quiet "vs." between them. */
.case-body h3.case-sub.to-card__title {
  margin: 0 0 12px;
  font-family: var(--cs-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.16px;
  text-transform: none;
  color: var(--text-headings);
}

.to-card__title em {
  font-style: italic;
  color: var(--text-muted);
}

.case-body .to-card > p {
  margin: 0;
}

/* The resolution sits apart, below a divider. */
.to-card__approach {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.case-body .to-card__approach p:last-child {
  margin: 0;
  color: var(--text-headings);
}

/* ---------- Impact: four equal stat cards, two by two ---------- */

.case-body .case-stats {
  --stats-w: min(var(--wide), 760px);
  width: var(--stats-w);
  margin-left: calc((100% - var(--stats-w)) / 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

@media (max-width: 520px) {
  .case-body .case-stats {
    grid-template-columns: 1fr;
  }
}

/* Impact: after the numbers, the qualitative side in two quotes. */
.case-body .im-lead {
  margin-top: 48px;
}

.case-body .im-quotes {
  margin-top: 24px;
}

/* The lead-in reads as normal text above each quote, not as a small label. */
.case-body .im-quotes figcaption.im-quote__intro {
  margin: 0 0 8px;
  font-family: var(--cs-body);
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0.28px;
  text-transform: none;
  color: var(--text-muted);
}

.case-body .im-quotes blockquote {
  margin: 0;
}

/* ---------- diagram icons: styles to try from the design studio ---------- */
/* Cream is the default. Without a studio choice the diagrams fall back to light icons with the
   engine, Delay and Payroll filled dark. */

[data-icons="cream"] .pb-step__icon,
[data-icons="cream"] .sf-node__icon {
  border: 1px solid var(--divider) !important;
  background: var(--surface-page) !important;
  color: var(--text-headings) !important;
}

/* Custom: any fill, with a near-black or near-white symbol picked for contrast by the studio. */
[data-icons="custom"] .pb-step__icon,
[data-icons="custom"] .sf-node__icon {
  border: 1px solid var(--icon-fill) !important;
  background: var(--icon-fill) !important;
  color: var(--icon-ink) !important;
}

[data-icons="outline"] .pb-step__icon,
[data-icons="outline"] .sf-node__icon {
  border: 1px solid var(--text-headings);
  background: transparent !important;
  color: var(--text-headings) !important;
}

[data-icons="soft"] .pb-step__icon,
[data-icons="soft"] .sf-node__icon {
  border-color: transparent !important;
  background: rgb(14 7 2 / 0.06) !important;
  color: var(--text-headings) !important;
}

[data-icons="filled"] .pb-step__icon,
[data-icons="filled"] .sf-node__icon {
  border-color: var(--text-headings) !important;
  background: var(--text-headings) !important;
  color: var(--surface-page) !important;
}

[data-icons="accent"] .pb-step__icon,
[data-icons="accent"] .sf-node__icon {
  border-color: var(--cs-accent) !important;
  background: var(--cs-accent) !important;
  color: var(--surface-page) !important;
}

/* GIFs and screenshots: at most 960px wide, so the 1054px recordings are never stretched. */
.case-body .case-pair,
.case-body .case-media,
.case-body .case-flow--mobile {
  --media-w: min(var(--wide), 960px);
  width: var(--media-w);
  margin-left: calc((100% - var(--media-w)) / 2);
}

.case-body .case-flow--mobile .case-media--phone {
  width: auto;
  margin: 0;
}

/* ---------- Solution walkthrough: pinned screens on the left, text scrolling on the right ---------- */

.case-group {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 900px) {
  /* The whole walkthrough is one pinned scene: 320px of text beside a 640px screen. Scrolling
     swaps the step shown in place instead of moving the page. HR admin and Employee put the text
     on the left; Manager flips it. case.js sets the walk's height (one stretch of scroll per step)
     and --scene-top (where the scene pins). */
  .case-body .sol-walk {
    --walk-w: min(1008px, 100vw - 64px);
    position: relative;
    width: var(--walk-w);
    margin: 96px 0 0 calc((100% - var(--walk-w)) / 2);
  }

  .sol-walk__steps {
    position: sticky;
    top: var(--scene-top, 96px);
    display: grid;
  }

  /* Every group, and every step inside it, shares one spot. */
  .sol-walk__steps .case-group {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 640px);
    column-gap: 48px;
    justify-content: space-between;
    margin: 0;
    pointer-events: none;
  }

  .sol-walk__steps .case-group.is-current {
    pointer-events: auto;
  }

  .sol-walk__steps .case-group > .case-flow {
    grid-area: 1 / 1;
  }

  .sol-walk__stage {
    grid-area: 1 / 2;
    position: relative;
    align-self: start;
    aspect-ratio: 1054 / 750;
    border-radius: 8px;
    background: rgb(14 7 2 / 0.036);
    overflow: hidden;
  }

  .sol-walk__steps .case-group:nth-child(even) {
    grid-template-columns: minmax(0, 640px) minmax(0, 320px);
  }

  .sol-walk__steps .case-group:nth-child(even) > .case-flow {
    grid-area: 1 / 2;
  }

  .sol-walk__steps .case-group:nth-child(even) > .sol-walk__stage {
    grid-area: 1 / 1;
  }

  /* Hidden recordings ignore the pointer, so the one showing gets the hover and its controls. */
  .sol-walk__stage .case-media:not(.is-active) {
    pointer-events: none;
  }

  .sol-walk__stage .case-media {
    position: absolute;
    inset: 0;
    width: 100% !important;
    margin: 0 !important;
  }

  .sol-walk__stage .case-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* The phone recording sits centered at the stage's height. */
  .sol-walk__stage .case-media--phone {
    display: grid;
    place-items: center;
    padding: 16px;
  }

  .sol-walk__stage .case-media--phone img {
    width: auto;
    height: 100%;
    border-radius: 8px;
  }

  .sol-walk__steps .case-flow,
  .sol-walk__steps .case-flow--mobile {
    display: block;
    width: auto !important;
    margin: 0 !important;
  }

  .sol-walk__steps .case-group__eyebrow {
    margin: 0 0 12px;
  }

  .sol-walk__steps .case-group__eyebrow + .case-sub {
    margin-top: 0;
  }

  /* Steps swap like the rest of the page reveals: a soft rise out of a blur. */
  .sol-walk__text,
  .sol-walk__stage,
  .sol-walk__stage .case-media {
    opacity: 0;
    translate: 0 6px;
    filter: blur(4px);
    transition:
      opacity var(--duration-reveal) var(--ease-standard),
      translate var(--duration-reveal) var(--ease-standard),
      filter var(--duration-reveal) var(--ease-standard);
  }

  .case-flow.is-active .sol-walk__text,
  .case-group.is-current .sol-walk__stage,
  .sol-walk__stage .case-media.is-active {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }

  /* Until the walkthrough first comes into view, it waits in the page's reveal state. */
  .case-group.is-pending .sol-walk__stage,
  .case-group.is-pending .sol-walk__text {
    opacity: 0;
    translate: 0 6px;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-walk__stage,
  .sol-walk__stage .case-media,
  .sol-walk__text {
    translate: none;
    filter: none;
    transition: opacity 200ms ease;
  }
}

/* ---------- Research: three personas, three layouts (picked in the Design studio) ----------
   Every persona tells the same four-beat story: who they are, what they need, what they ask us,
   and the design opportunity that answers it. */

.case-body .rs {
  width: var(--wide);
  margin: 64px 0 0 calc((100% - var(--wide)) / 2);
}

.rs-p__role {
  margin: 0;
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-headings);
}

/* Small labels: Needs, Asks, Design opportunity. */
.rs-p__need span,
.rs-p__quote span,
.rs-p__opp span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.case-body .rs-p__need {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-headings);
}

.case-body .rs-p__quote {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--cs-display);
  font-size: 22px;
  line-height: 30px;
  color: var(--text-headings);
}

.case-body .rs-p__opp {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-headings);
}

/* The role repeats on the back of a sticky note only. */
.rs-p__back .rs-p__role {
  display: none;
}

/* ===== A. Sticky notes: the front tells who, needs and asks; flip it for our answer. */

[data-research="notes"] .rs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 48px 40px;
  border-radius: 8px;
  background: rgb(14 7 2 / 0.036);
}

[data-research="notes"] .rs-p {
  --tilt: -2deg;
  position: relative;
  aspect-ratio: 4 / 5;
  perspective: 1200px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  rotate: var(--tilt);
  translate: var(--dx, 0) var(--dy, 0);
  transition: rotate 300ms var(--ease-standard), scale 300ms var(--ease-standard);
}

[data-research="notes"] .rs-p:nth-child(2) { --tilt: 1.5deg; }
[data-research="notes"] .rs-p:nth-child(3) { --tilt: -1deg; }

[data-research="notes"] .rs-p:hover,
[data-research="notes"] .rs-p.is-dragging {
  rotate: 0deg;
  scale: 1.03;
  z-index: 2;
}

[data-research="notes"] .rs-p.is-dragging {
  cursor: grabbing;
  transition: none;
}

[data-research="notes"] .rs-p__front,
[data-research="notes"] .rs-p__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 2px;
  background: var(--note, #f7e7a6);
  box-shadow: 0 1px 2px rgb(43 43 43 / 0.08), 0 12px 24px -12px rgb(43 43 43 / 0.24);
  backface-visibility: hidden;
  transition: transform 600ms var(--ease-standard);
}

[data-research="notes"] .rs-p[data-role="manager"] { --note: #f3d6c6; }
[data-research="notes"] .rs-p[data-role="employee"] { --note: #dce6c4; }

[data-research="notes"] .rs-p__back {
  transform: rotateY(180deg);
}

[data-research="notes"] .rs-p__back .rs-p__role {
  display: block;
}

[data-research="notes"] .rs-p__back .rs-p__opp {
  margin-top: auto;
  margin-bottom: auto;
  font-family: var(--cs-display);
  font-size: 20px;
  line-height: 28px;
}

[data-research="notes"] .rs-p.is-flipped .rs-p__front { transform: rotateY(-180deg); }
[data-research="notes"] .rs-p.is-flipped .rs-p__back { transform: rotateY(0deg); }

/* The question sits at the bottom of the note, the punchline of the front. */
[data-research="notes"] .rs-p__quote {
  margin-top: auto;
}

/* A strip of tape on each note. */
[data-research="notes"] .rs-p__front::before,
[data-research="notes"] .rs-p__back::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 72px;
  height: 20px;
  translate: -50% 0;
  rotate: 2deg;
  background: rgb(255 255 255 / 0.5);
  box-shadow: 0 1px 2px rgb(43 43 43 / 0.06);
}

[data-research="notes"] .rs-p__front::after,
[data-research="notes"] .rs-p__back::after {
  content: "Flip for our answer \2192";
  margin-top: 16px;
  font-family: var(--cs-label);
  font-size: 12px;
  line-height: 16px;
  color: rgb(43 43 43 / 0.5);
}

[data-research="notes"] .rs-p__back::after {
  content: "\2190  Back to their question";
}

/* ===== B. Questions: the three questions are the choices; picking one tells that person's story. */

[data-research="ask"] .rs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.rs-ask {
  display: none;
}

[data-research="ask"] .rs-ask {
  display: grid;
  gap: 8px;
  grid-row: 1 / span 3;
}

.rs-ask button {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: transparent;
  text-align: left;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.rs-ask b {
  font-family: var(--cs-label);
  font-variation-settings: var(--cs-label-var, normal);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
}

.rs-ask q {
  font-family: var(--cs-display);
  font-size: 20px;
  line-height: 28px;
  quotes: "\201C" "\201D";
}

.rs-ask button:hover {
  color: var(--text-headings);
}

.rs-ask button[aria-pressed="true"] {
  border-color: var(--text-headings);
  background: rgb(14 7 2 / 0.036);
  color: var(--text-headings);
}

/* The story on the right: three beats on a line, needs, asks, then the opportunity. */
[data-research="ask"] .rs-p {
  grid-column: 2;
  grid-row: 1;
  padding-top: 16px;
  opacity: 0;
  translate: 0 6px;
  filter: blur(4px);
  visibility: hidden;
  transition: opacity var(--duration-reveal) var(--ease-standard), translate var(--duration-reveal) var(--ease-standard), filter var(--duration-reveal) var(--ease-standard), visibility 0s linear var(--duration-reveal);
}

[data-research="ask"] .rs-p.is-active {
  opacity: 1;
  translate: 0 0;
  filter: none;
  visibility: visible;
  transition-delay: 0s;
}

[data-research="ask"] .rs-p__need,
[data-research="ask"] .rs-p__quote,
[data-research="ask"] .rs-p__opp {
  position: relative;
  margin: 0;
  padding: 0 0 24px 24px;
  border-left: 1px solid var(--divider);
}

[data-research="ask"] .rs-p__need { margin-top: 16px; }
[data-research="ask"] .rs-p__opp { padding-bottom: 0; border-left-color: transparent; }

[data-research="ask"] .rs-p__need::before,
[data-research="ask"] .rs-p__quote::before,
[data-research="ask"] .rs-p__opp::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-bg, #fffbf4);
  border: 1px solid var(--text-muted);
}

[data-research="ask"] .rs-p__opp::before {
  background: var(--text-headings);
  border-color: var(--text-headings);
}

[data-research="ask"] .rs-p__quote {
  font-size: 18px;
  line-height: 26px;
}

/* ===== C. Scroll story: the section pins, and scrolling builds each person's story one beat at
   a time (who and needs, then what they ask, then our answer) before moving to the next. */

[data-research="story"] .rs {
  position: relative;
}

[data-research="story"] .rs-scene {
  position: sticky;
  top: var(--rs-top, 96px);
  display: grid;
}

[data-research="story"] .rs-p {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  visibility: hidden;
}

[data-research="story"] .rs-p.is-active {
  visibility: visible;
}

[data-research="story"] .rs-p [data-part] {
  opacity: 0;
  translate: 0 6px;
  filter: blur(4px);
  transition: opacity var(--duration-reveal) var(--ease-standard), translate var(--duration-reveal) var(--ease-standard), filter var(--duration-reveal) var(--ease-standard);
}

[data-research="story"] .rs-p.is-active [data-part].is-shown {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

[data-research="story"] .rs-p__need {
  font-size: 16px;
  line-height: 24px;
}

[data-research="story"] .rs-p__quote {
  margin-top: 32px;
  font-size: 32px;
  line-height: 40px;
}

[data-research="story"] .rs-p__opp {
  padding: 24px;
  border-radius: 8px;
  background: rgb(14 7 2 / 0.036);
  font-size: 16px;
  line-height: 24px;
}

/* Progress: one bar per person, filling beat by beat. */
.rs-dots {
  display: none;
}

[data-research="story"] .rs-dots {
  display: flex;
  gap: 8px;
  margin-top: 48px;
}

.rs-dots span {
  position: relative;
  width: 48px;
  height: 2px;
  background: var(--divider);
  overflow: hidden;
}

.rs-dots span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-headings);
  transform-origin: left;
  scale: var(--fill, 0) 1;
  transition: scale 300ms ease;
}

/* Small screens: every layout becomes a plain stack, each story told in order. */
@media (max-width: 899px) {
  [data-research] .rs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    height: auto !important;
    padding: 0;
    background: none;
  }

  [data-research] .rs-ask,
  [data-research] .rs-dots,
  [data-research] .rs-p__back .rs-p__role {
    display: none !important;
  }

  [data-research] .rs-scene {
    position: static;
    display: grid;
    gap: 40px;
  }

  [data-research] .rs-p,
  [data-research] .rs-p [data-part] {
    position: static;
    display: block;
    grid-area: auto;
    aspect-ratio: auto;
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
    visibility: visible !important;
    rotate: none;
  }

  [data-research] .rs-p__front,
  [data-research] .rs-p__back {
    position: static;
    transform: none !important;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  [data-research] .rs-p__front::before,
  [data-research] .rs-p__front::after,
  [data-research] .rs-p__back::before,
  [data-research] .rs-p__back::after {
    display: none;
  }

  [data-research] .rs-p__back {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-p,
  .rs-p__front,
  .rs-p__back,
  .rs-p [data-part] {
    transition: none !important;
  }
}

/* ---------- Recording controls: pause/play and restart, shown on hover ---------- */

.case-media {
  position: relative;
}

.case-media__freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* In the phone frame the recording is padded, so the frozen frame matches the image box. */
.sol-walk__stage .case-media--phone > img,
.sol-walk__stage .case-media--phone .case-media__freeze {
  grid-area: 1 / 1;
}

.sol-walk__stage .case-media--phone .case-media__freeze {
  position: static;
  width: auto;
  height: 100%;
  border-radius: 8px;
}

.case-media__controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 200ms ease, translate 200ms var(--ease-standard);
}

.case-media:hover .case-media__controls,
.case-media:focus-within .case-media__controls,
.case-media.is-paused .case-media__controls {
  opacity: 1;
  translate: 0 0;
}

.case-media__controls button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(43 43 43 / 0.56);
  color: #fffbf4;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms ease, scale 200ms var(--ease-standard);
}

.case-media__controls button:hover {
  background: rgb(43 43 43 / 0.8);
}

.case-media__controls button:active {
  scale: 0.94;
}

.case-media__controls svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.case-media__controls button[data-act="restart"] svg {
  fill: none;
}

@media (hover: none) {
  .case-media__controls {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- hero: two layouts and two backgrounds, picked in the Design studio ---------- */
/* body[data-hero]: "stacked" (recording on top, text below) or "side" (text left, recording right).
   body[data-hero-bg]: "gradient" (slow pastel green wash) or "dash" (faint dashboard sketch). */

.case-page {
  --hero-g1: #cfe6d4; /* mint */
  --hero-g2: #b8d5c0; /* sage */
  --hero-g3: #e4efd8; /* celadon */
  --hero-g4: #f3eedc; /* cream */
  --hero-ink: #135338;
}

.case-hero {
  align-items: stretch;
  text-align: left;
}

.case-hero__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Gradient: four soft blobs drifting slowly under a heavy blur. */
.hero-grad {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: var(--hero-g4);
  filter: blur(64px) saturate(1.04);
}

.hero-grad i {
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.9;
}

/* Each blob travels a loop: across, down, back and up, so the color keeps sweeping sideways and vertically. */
.hero-grad i:nth-child(1) { left: -10%; top: -20%; background: var(--hero-g1); animation: hero-loop-a 16s ease-in-out infinite; }
.hero-grad i:nth-child(2) { right: -10%; top: -10%; background: var(--hero-g2); animation: hero-loop-b 19s ease-in-out infinite; }
.hero-grad i:nth-child(3) { left: 10%; bottom: -30%; background: var(--hero-g3); animation: hero-loop-c 22s ease-in-out infinite; }
.hero-grad i:nth-child(4) { right: 10%; bottom: -20%; width: 40%; background: color-mix(in srgb, var(--hero-ink) 16%, var(--hero-g1)); animation: hero-loop-b 25s ease-in-out infinite reverse; }

@keyframes hero-loop-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(70%, 10%) scale(1.15); }
  50% { transform: translate(60%, 60%) scale(0.95); }
  75% { transform: translate(-6%, 50%) scale(1.1); }
}
@keyframes hero-loop-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-70%, 30%) scale(0.9); }
  50% { transform: translate(-40%, 70%) scale(1.15); }
  75% { transform: translate(10%, 40%) scale(1); }
}
@keyframes hero-loop-c {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  33% { transform: translate(60%, -50%) scale(0.92); }
  66% { transform: translate(-20%, -80%) scale(1.15); }
}

/* Dashboard: a faint sketch of tables and charts, fading out toward the edges. */
.hero-dash {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--hero-ink);
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
}

.hero-dash svg {
  display: block;
  width: 100%;
  height: 100%;
}

.case-page:not([data-hero-bg="dash"]) .hero-dash,
.case-page[data-hero-bg="dash"] .hero-grad {
  display: none;
}

.case-page[data-hero-bg="dash"] .case-hero__stage {
  background: color-mix(in srgb, var(--hero-g3) 40%, var(--cs-bg));
}

/* The recording: a framed screen, never full bleed. */
.case-hero__shot {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 4px rgb(19 83 56 / 0.06), 0 24px 56px -16px rgb(19 83 56 / 0.24);
}

.case-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Layout A: stacked --- */
.case-page[data-hero="stacked"] .case-hero {
  padding: 24px var(--gutter) 0;
}

.case-page[data-hero="stacked"] .case-hero__stage {
  order: -1;
  display: grid;
  place-items: center;
  padding: 64px 32px;
  border-radius: 12px;
}

.case-page[data-hero="stacked"] .case-hero__shot {
  width: min(880px, 100%);
}

.case-page[data-hero="stacked"] .case-hero__text {
  width: min(var(--reading), 100%);
  margin: 64px auto 0;
}

.case-page[data-hero="stacked"] .case-hero__title {
  max-width: none;
}

.case-page[data-hero="stacked"] .case-hero__meta {
  width: 100%;
}

/* --- Layout B: side by side (title and details left, recording right, bleeding off the edge) --- */
.case-page[data-hero="side"] .case-hero {
  flex-direction: row;
  align-items: center;
  gap: 64px;
  min-height: min(760px, calc(100vh - 64px));
  padding: 32px 0 0 var(--inset);
}

.case-page[data-hero="side"] .case-hero__text {
  flex: 0 0 min(440px, 38%);
}

.case-page[data-hero="side"] .case-hero .case-hero__meta {
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

.case-page[data-hero="side"] .case-hero__stage {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 64px 0 64px 64px;
  border-radius: 12px 0 0 12px;
}

.case-page[data-hero="side"] .case-hero__shot {
  width: 880px;
  flex: none;
  border-radius: 10px 0 0 10px;
}

/* With the side nav showing from the top, the text starts to its right. */
@media (min-width: 1320px) {
  .case-page[data-hero="side"] .case-hero {
    padding-left: calc(var(--gutter) + 200px);
  }
}

@media (max-width: 899px) {
  .case-page[data-hero="side"] .case-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 24px var(--gutter) 0;
    gap: 40px;
  }

  .case-page[data-hero="side"] .case-hero__stage {
    padding: 32px 0 32px 32px;
  }

  .case-page[data-hero="side"] .case-hero__shot {
    width: 640px;
  }

  .case-page[data-hero="stacked"] .case-hero__stage {
    padding: 32px 16px;
  }

  .case-page[data-hero="stacked"] .case-hero__text {
    margin-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grad i {
    animation: none;
  }
}

/* "Paycom" eyebrow: same type and 12px gap to the title as the section eyebrows. */
.case-hero__label {
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.case-hero .case-hero__title {
  margin-top: 12px;
}

/* Details moved into the reading column (side-by-side layouts): they open the page, before the Overview. */
.case-page .case-body > .case-hero__meta {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 80px;
}

/* The side-by-side text no longer needs to clear the nav, which now starts at the Overview. */
@media (min-width: 1320px) {
  .case-page[data-hero="side"] .case-hero {
    padding-left: var(--inset);
  }
}

/* --- Layout C: in gradient (the wash fills the whole hero, title and recording sit on it) --- */
.case-page[data-hero="immersive"] .case-hero {
  flex-direction: row;
  align-items: center;
  gap: 64px;
  min-height: min(720px, calc(100vh - 96px));
  margin: 16px var(--gutter) 0;
  padding: 64px 0 64px 64px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

.case-page[data-hero="immersive"] .case-hero__text {
  flex: 0 0 min(420px, 36%);
}

.case-page[data-hero="immersive"] .case-hero__stage {
  position: static;
  flex: 1 1 auto;
  display: flex;
  overflow: visible;
}

.case-page[data-hero="immersive"] .hero-grad,
.case-page[data-hero="immersive"] .hero-dash {
  z-index: -1;
}

.case-page[data-hero="immersive"][data-hero-bg="dash"] .case-hero {
  background: color-mix(in srgb, var(--hero-g3) 40%, var(--cs-bg));
}

.case-page[data-hero="immersive"][data-hero-bg="dash"] .case-hero__stage {
  background: none;
}

.case-page[data-hero="immersive"] .case-hero__shot {
  width: 860px;
  flex: none;
  border-radius: 10px 0 0 10px;
}

@media (max-width: 899px) {
  .case-page[data-hero="immersive"] .case-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 40px;
    padding: 40px 0 40px 24px;
  }

  .case-page[data-hero="immersive"] .case-hero__text {
    padding-right: 24px;
  }

  .case-page[data-hero="immersive"] .case-hero__shot {
    width: 640px;
  }
}

/* ---------- side-by-side layouts: wider text (title in two lines), recording pinned to the right ---------- */
.case-page[data-hero="side"] .case-hero__text,
.case-page[data-hero="immersive"] .case-hero__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
}

.case-page[data-hero="side"] .case-hero__title,
.case-page[data-hero="immersive"] .case-hero__title {
  max-width: none;
}

.case-page[data-hero="side"] .case-hero__stage,
.case-page[data-hero="immersive"] .case-hero__stage {
  flex: 0 0 min(560px, 42%);
  justify-content: flex-end;
}

.case-page[data-hero="side"] .case-hero__stage {
  padding: 48px 0 48px 48px;
}

.case-page[data-hero="side"] .case-hero__shot,
.case-page[data-hero="immersive"] .case-hero__shot {
  width: 100%;
  flex: none;
}

/* In gradient: the wash always covers the whole panel, behind everything in it. */
.case-page[data-hero="immersive"] .case-hero {
  position: relative;
  z-index: 2;
}

.case-page[data-hero="immersive"] .hero-grad {
  inset: -20%;
}

.case-page[data-hero="immersive"] .case-hero__text {
  position: relative;
  z-index: 1;
}

/* The reveal's translate and blur would trap the wash inside the recording's box; here it only fades. */
.case-page[data-hero="immersive"] .case-hero__stage.case-reveal {
  translate: none;
  filter: none;
}

/* The floating pill (small screens) follows the side nav: hidden over the hero, shown from the Overview on. */
.case-pill {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.case-nav-on .case-pill {
  opacity: 1;
  pointer-events: auto;
}

/* In gradient: a green-tinted base so the panel never shows plain cream between the blobs. */
.case-page[data-hero="immersive"] .hero-grad {
  background: linear-gradient(120deg, var(--hero-g3), var(--hero-g1) 50%, var(--hero-g4));
}

@media (max-width: 899px) {
  .case-page[data-hero="side"] .case-hero__text,
  .case-page[data-hero="immersive"] .case-hero__text {
    max-width: none;
  }

  .case-page[data-hero="side"] .case-hero__stage,
  .case-page[data-hero="immersive"] .case-hero__stage {
    flex: none;
  }
}

/* Two-line title: the text takes most of the row, the recording the rest. */
@media (min-width: 900px) {
  .case-page[data-hero="side"] .case-hero__text,
  .case-page[data-hero="immersive"] .case-hero__text {
    flex: 0 0 min(740px, 58%);
    max-width: none;
  }

  .case-page[data-hero="side"] .case-hero__stage,
  .case-page[data-hero="immersive"] .case-hero__stage {
    flex: 1 1 0;
    min-width: 0;
  }

  .case-page[data-hero="side"] .case-hero__title,
  .case-page[data-hero="immersive"] .case-hero__title {
    text-wrap: pretty;
  }
}

/* No rule above the project details. */
.case-page .case-hero__meta {
  border-top: 0;
  padding-top: 0;
}

/* Hero height: the panel hugs the recording instead of filling most of the screen. */
.case-page[data-hero="side"] .case-hero,
.case-page[data-hero="immersive"] .case-hero {
  min-height: 0;
}

.case-page[data-hero="side"] .case-hero {
  padding-top: 48px;
}

/* Hero recording: 640px wide, the same as the Solution recordings. The panel sizes itself around it. */
.case-page .case-hero .case-hero__shot {
  width: min(640px, 100%);
  flex: none;
  border-radius: 10px;
}

@media (min-width: 900px) {
  .case-page[data-hero="side"] .case-hero__stage {
    flex: none;
    padding: 48px;
  }

  .case-page[data-hero="immersive"] .case-hero__stage {
    flex: none;
  }

  .case-page[data-hero="immersive"] .case-hero {
    padding-right: 64px;
  }

  .case-page[data-hero="side"] .case-hero__text,
  .case-page[data-hero="immersive"] .case-hero__text {
    flex: 1 1 auto;
  }
}

@media (min-width: 900px) {
  .case-page[data-hero="side"] .case-hero__stage {
    width: 736px; /* 640 recording + 48 on each side */
    max-width: 52%;
  }

  .case-page[data-hero="immersive"] .case-hero__stage {
    width: 640px;
    max-width: 52%;
  }

  .case-page[data-hero="side"] .case-hero__shot,
  .case-page[data-hero="immersive"] .case-hero__shot {
    width: 100%;
  }
}

/* ---------- round 5: 640px recording everywhere, wider side panel, full-screen gradient ---------- */
@media (min-width: 900px) {
  .case-page[data-hero="side"] .case-hero__stage,
  .case-page[data-hero="immersive"] .case-hero__stage {
    max-width: none;
  }

  /* Side by side: the green panel runs a little past half the screen; the recording keeps its spot on the panel's left. */
  .case-page[data-hero="side"] .case-hero {
    gap: 48px;
  }

  .case-page[data-hero="side"] .case-hero__stage {
    width: max(54vw, 736px);
    justify-content: flex-start;
  }

  .case-page[data-hero="side"] .case-hero__shot {
    width: 640px;
  }

  .case-page[data-hero="immersive"] .case-hero__shot {
    width: 640px;
  }
}

/* In gradient: edge to edge, and tall enough that the details sit below the first view. */
.case-page[data-hero="immersive"] .case-hero {
  margin: 0;
  border-radius: 0;
  min-height: calc(100svh - var(--hero-top, 64px));
  padding-right: var(--inset);
  padding-left: var(--inset);
}

@media (min-width: 900px) {
  /* Side by side: text starts at the page gutter (in line with "zahra_"), panel is 52% of the screen. */
  .case-page[data-hero="side"] .case-hero,
  .case-page[data-hero="side"] .case-hero[class] {
    padding-left: var(--gutter);
  }

  .case-page[data-hero="side"] .case-hero__stage {
    width: max(52vw, 736px);
  }

  .case-page[data-hero="immersive"] .case-hero {
    padding-left: 96px;
    padding-right: 96px;
  }
}

/* ---------- gradient height: 592px in every layout, whatever the screen height ---------- */
@media (min-width: 900px) {
  .case-page[data-hero="stacked"] .case-hero__stage,
  .case-page[data-hero="side"] .case-hero__stage {
    box-sizing: border-box;
    height: 592px;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
    align-items: center;
  }

  .case-page[data-hero="side"] .case-hero__stage {
    width: max(57vw, 736px);
  }

  .case-page[data-hero="immersive"] .case-hero {
    box-sizing: border-box;
    min-height: 0;
    height: 592px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 900px) {
  .case-page[data-hero="stacked"] .case-hero__stage {
    align-self: stretch;
  }
}

/* ---------- 600px gradient; recording lines up with "about"; In gradient box = stacked width, side-by-side position ---------- */
@media (min-width: 900px) {
  .case-page[data-hero="stacked"] .case-hero__stage,
  .case-page[data-hero="side"] .case-hero__stage {
    height: 600px;
  }

  /* Side by side: the recording's right edge meets the right edge of "about" in the top bar. */
  .case-page[data-hero="side"] .case-hero__stage {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: var(--about-inset, 158px);
  }

  /* In gradient: a rounded box between the page gutters (like Stacked), 48px under the top bar (like Side by side). */
  .case-page[data-hero="immersive"] .case-hero {
    height: 600px;
    margin: 48px var(--gutter) 0;
    border-radius: 12px;
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* 612px gradient everywhere; In gradient gives the title room for three lines. */
@media (min-width: 900px) {
  .case-page[data-hero="stacked"] .case-hero__stage,
  .case-page[data-hero="side"] .case-hero__stage,
  .case-page[data-hero="immersive"] .case-hero {
    height: 612px;
  }

  .case-page[data-hero="immersive"] .case-hero {
    gap: 32px;
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* In gradient: extra room so the title stays at three lines even with a scrollbar at 1440. */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero {
    gap: 24px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .case-page[data-hero="immersive"] .case-hero__text {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* In gradient: the title breaks into exactly three lines, set a little smaller (40/48) so the first line fits beside the recording. */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__title {
    font-size: 40px;
    line-height: 48px;
  }

  .case-page[data-hero="immersive"] .case-hero__title span {
    display: block;
    white-space: nowrap;
  }
}

/* In gradient: 16px more padding on the left and right (40 → 56). */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* In gradient: same 48/56 title as Side by side, wrapping on its own. */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__title {
    font-size: 48px;
    line-height: 56px;
  }

  .case-page[data-hero="immersive"] .case-hero__title span {
    display: inline;
    white-space: normal;
  }
}

/* In gradient: 48/56 title in exactly three lines. */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__title span {
    display: block;
    white-space: nowrap;
  }
}

/* In gradient: the title takes the width it needs; the 640px recording slides right and runs off the box's edge. */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__text {
    flex: none;
  }

  .case-page[data-hero="immersive"] .case-hero {
    gap: 48px;
    padding-right: 0;
  }

  .case-page[data-hero="immersive"] .case-hero__stage {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .case-page[data-hero="immersive"] .case-hero__shot {
    width: 640px;
    border-radius: 10px 0 0 10px;
  }
}

@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__stage {
    justify-content: flex-start;
  }
}

/* In gradient: the recording's right edge lines up with "about" (like Side by side).
   On narrower screens where that would cover the title, it slides right and runs off the box instead. */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__stage {
    justify-content: safe flex-end;
    padding-right: calc(var(--about-inset, 158px) - var(--gutter));
  }
}

/* In gradient: recording corners match the Solution recordings (8px on all four). */
@media (min-width: 900px) {
  .case-page[data-hero="immersive"] .case-hero__shot {
    border-radius: 8px;
  }
}