/* Story sections for case study pages: the repeating unit of the Revli-rhythm template
   (heading with accent phrase -> short text -> one full-width visual -> optional collapsed
   detail) plus the "View other works" ending. Built on the classic Revli blocks' own
   proportions and palette (aicasestudy*.css, casestudiessinglegrid.css): dark ink #172125,
   cream #DAD8D7 text, orange accent #F77B46, no boxed cards. */

.csr-story,
.csr-more {
  --csr-cream: #dad8d7;
  --csr-dim: rgba(218, 216, 215, 0.62);
  --csr-faint: rgba(218, 216, 215, 0.38);
  --csr-line: #454d51;
  --csr-orange: #f77b46;
  --csr-grad: linear-gradient(180deg, #ef7160 0%, #941209 100%);
  font-family: "Spline Sans", sans-serif;
}

.csr-story {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
/* consecutive stories share one rule between them, like Revli's feature group divider */
section + section > .csr-story {
  border-top: 1px solid var(--csr-line);
}

.csr-copy {
  max-width: 76rem;
}

/* wide opener picture at the top of a section */
.csr-opener {
  margin: 0 0 5.6rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1d2a2f;
}
.csr-opener-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csr-opener--empty {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(247, 123, 70, 0.55);
  background:
    repeating-linear-gradient(135deg, rgba(218, 216, 215, 0.03) 0 12px, transparent 12px 24px),
    #1d2a2f;
}
.csr-slot {
  max-width: 60rem;
  padding: 2.4rem;
  text-align: center;
}
.csr-slot-k {
  font-family: "Satoshi-Bold";
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csr-orange);
}
.csr-slot-file {
  margin-top: 1.2rem;
  font-family: "Satoshi-Bold";
  font-size: 2.4rem;
  color: var(--csr-cream);
}
.csr-slot-alt {
  margin-top: 1.2rem;
  font-size: 1.5rem;
  line-height: 155%;
  color: var(--csr-dim);
}
.csr-eyebrow {
  margin-bottom: 1.6rem;
  font-family: "Satoshi-Bold";
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csr-faint);
}
.csr-title {
  margin-bottom: 2.8rem;
  font-family: "Satoshi-Bold";
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 130%;
  color: var(--csr-cream);
}
.csr-title-accent {
  color: var(--csr-orange);
}
.csr-body p {
  font-size: 2rem;
  line-height: 160%;
  color: var(--csr-dim);
  max-width: 64ch;
}
.csr-body p + p {
  margin-top: 1.6rem;
}
.csr-body b,
.csr-body strong {
  font-weight: 600;
  color: var(--csr-cream);
}

/* large single line, same voice as Revli's closing statement paragraph */
.csr-statement {
  max-width: 28ch;
  margin-top: 5.6rem;
  font-family: "Satoshi-Bold";
  font-size: clamp(3rem, 3.4vw, 4.6rem);
  line-height: 135%;
  color: var(--csr-cream);
}
.csr-copy:empty + .csr-statement {
  margin-top: 0;
}

.csr-visual {
  margin-top: 5.6rem;
}
.csr-caption {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 150%;
  color: var(--csr-faint);
  max-width: 70ch;
}

/* images, single or paired (Revli's image grid gap) */
.csr-figure {
  margin: 0;
}
.csr-img {
  display: block;
  width: 100%;
  height: auto;
}
.csr-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2vw;
}

/* ---------- flow diagram, drawn open on the dark page ---------- */
.csr-flow {
  margin: 0;
}
.csr-flow-stages {
  --gap: 5.6rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
}
.csr-flow-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* arrow into each stage after the first */
.csr-flow-stage + .csr-flow-stage::before {
  content: "";
  position: absolute;
  top: calc(50% + 1.6rem);
  right: calc(100% + 1rem);
  width: calc(var(--gap) - 2rem);
  height: 1px;
  background: var(--csr-orange);
}
.csr-flow-stage + .csr-flow-stage::after {
  content: "";
  position: absolute;
  top: calc(50% + 1.6rem - 4px);
  right: calc(100% + 0.6rem);
  border: 4.5px solid transparent;
  border-left: 7px solid var(--csr-orange);
  border-right: 0;
}
.csr-flow-label {
  min-height: 3.2rem;
  margin-bottom: 1.6rem;
  font-family: "Satoshi-Bold";
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csr-faint);
}
.csr-flow-stage.is-hi .csr-flow-label {
  color: var(--csr-orange);
}
.csr-flow-nodes {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.csr-flow-node {
  min-width: 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--csr-line);
  overflow-wrap: anywhere; /* identifiers like bridge_lead_email_person */
}
.csr-flow-stage.is-hi .csr-flow-node {
  border-left-color: var(--csr-orange);
}
.csr-flow-node b {
  display: block;
  font-family: "Satoshi-Bold";
  font-size: 1.8rem;
  line-height: 130%;
  color: var(--csr-cream);
}
.csr-flow-node span {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
  color: var(--csr-faint);
}
.csr-flow-node ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.csr-flow-node li {
  font-size: 1.4rem;
  line-height: 170%;
  color: var(--csr-dim);
}

/* ---------- step row: a sequence of open columns ---------- */
.csr-steps {
  margin: 0;
}
.csr-steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 3.2rem;
  margin: 0;
  padding: 0;
}
.csr-step {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid var(--csr-line);
}
.csr-step.is-hi {
  border-top-color: var(--csr-orange);
}
.csr-steps.is-connected .csr-step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--csr-line);
}
.csr-steps.is-connected .csr-step.is-hi::before {
  background: var(--csr-orange);
}
.csr-step-label {
  font-family: "Satoshi-Bold";
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csr-faint);
}
.csr-step.is-hi .csr-step-label {
  color: var(--csr-orange);
}
.csr-step-value {
  margin-top: 1.2rem;
  font-family: "Satoshi-Bold";
  font-size: 5.6rem;
  line-height: 1;
  background: var(--csr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.csr-step-title {
  margin-top: 1.2rem;
  font-family: "Satoshi-Bold";
  font-size: 1.8rem;
  line-height: 135%;
  color: var(--csr-cream);
}
.csr-step-text {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 155%;
  color: var(--csr-dim);
}
.csr-step-tag {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: var(--csr-faint);
}

/* ---------- stats and results ---------- */
.csr-stats {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 3.2rem;
  margin: 0;
}
.csr-stats dt {
  font-family: "Satoshi-Bold";
  /* sized to fit four columns of figures like "$2,424/mo" without breaking mid-figure */
  font-size: clamp(3.2rem, 3.4vw, 5.6rem);
  white-space: nowrap;
  line-height: 1;
  background: var(--csr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.csr-stats dd {
  margin: 1.2rem 0 0;
  font-family: "Satoshi-Bold";
  font-size: 1.6rem;
  line-height: 140%;
  color: var(--csr-cream);
}
.csr-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.8rem 4%;
}
.csr-result h3 {
  margin-bottom: 1.2rem;
  font-family: "Satoshi-Bold";
  font-size: 2.4rem;
  line-height: 130%;
  color: var(--csr-orange);
}
.csr-result p {
  font-size: 1.7rem;
  line-height: 160%;
  color: var(--csr-dim);
  max-width: 48ch;
}

/* ---------- collapsed technical detail ---------- */
.csr-detail {
  margin-top: 5.6rem;
  border-top: 1px solid var(--csr-line);
  border-bottom: 1px solid var(--csr-line);
}
.csr-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 0;
  cursor: pointer;
  list-style: none;
  font-family: "Satoshi-Bold";
  font-size: 1.6rem;
  color: var(--csr-cream);
}
.csr-detail summary::-webkit-details-marker {
  display: none;
}
.csr-detail summary:hover span {
  color: var(--csr-orange);
}
.csr-detail summary:focus-visible {
  outline: 2px solid var(--csr-orange);
  outline-offset: 4px;
}
.csr-detail summary i {
  position: relative;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
}
.csr-detail summary i::before,
.csr-detail summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--csr-orange);
  transition: transform 0.3s ease;
}
.csr-detail summary i::after {
  transform: rotate(90deg);
}
.csr-detail[open] summary i::after {
  transform: rotate(0deg);
}
.csr-detail-body {
  padding-bottom: 3.2rem;
}
.csr-detail-text p,
.csr-detail-text li {
  font-size: 1.7rem;
  line-height: 165%;
  color: var(--csr-dim);
  max-width: 70ch;
}
.csr-detail-text p + p {
  margin-top: 1.4rem;
}
.csr-detail-text b,
.csr-detail-text strong {
  color: var(--csr-cream);
  font-weight: 600;
}
.csr-detail-text code,
.csr-comp code {
  font-size: 0.9em;
  color: var(--csr-cream);
}
.csr-detail-text + .csr-comp,
.csr-comp + .csr-detail-text {
  margin-top: 3.2rem;
}
.csr-comp {
  margin: 0;
}
.csr-comp > div {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: 3.2rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--csr-line);
}
.csr-comp > div:first-child {
  border-top: 0;
}
.csr-comp dt {
  font-family: "Satoshi-Bold";
  font-size: 1.6rem;
  color: var(--csr-cream);
}
.csr-comp dd {
  margin: 0;
  font-size: 1.6rem;
  line-height: 160%;
  color: var(--csr-dim);
}

.csr-note {
  margin-top: 4rem;
  font-size: 1.4rem;
  line-height: 160%;
  color: var(--csr-faint);
  max-width: 80ch;
}

/* ---------- View other works ---------- */
.csr-more {
  padding-top: 8rem;
  padding-bottom: 10rem;
  border-top: 1px solid #454d51;
}
.csr-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4.8rem;
}
.csr-more-head .csr-title {
  margin: 0;
}
.csr-more-all,
.csr-more-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  font-family: "Satoshi-Black";
  font-size: 1.4rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--csr-cream);
}
.csr-more-all {
  height: 4.8rem;
  padding: 0 2rem;
  border: 1px solid var(--csr-cream);
  transition: background 0.3s, color 0.3s;
}
.csr-more-all:hover {
  background: var(--csr-cream);
  color: #172125;
}
.csr-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4%;
}
.csr-more-card {
  display: block;
  text-decoration: none;
}
.csr-more-media {
  margin: 0 0 2.4rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #1d2a2f;
}
.csr-more-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.csr-more-card:hover .csr-more-media img {
  transform: scale(1.03);
}
.csr-more-tag {
  margin-bottom: 1rem;
  font-family: "Satoshi-Bold";
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csr-faint);
}
.csr-more-title {
  margin-bottom: 2rem;
  font-family: "Satoshi-Bold";
  font-size: 2.6rem;
  line-height: 125%;
  color: var(--csr-cream);
  transition: color 0.3s;
}
.csr-more-card:hover .csr-more-title {
  color: var(--csr-orange);
}
.csr-more-cta {
  color: var(--csr-orange);
}
.csr-more-cta svg {
  transition: transform 0.4s ease;
}
.csr-more-card:hover .csr-more-cta svg {
  transform: translateX(0.8rem);
}
.csr-more-card:focus-visible {
  outline: 2px solid var(--csr-orange);
  outline-offset: 6px;
}

/* ---------- responsive (Revli's own breakpoints) ---------- */
@media only screen and (max-width: 992px) {
  /* flow reads top to bottom, arrows point down */
  .csr-flow-stages {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .csr-flow-label {
    min-height: 0;
  }
  .csr-flow-stage + .csr-flow-stage::before {
    top: -2.8rem;
    right: auto;
    left: 0.4rem;
    width: 1px;
    height: 1.6rem;
  }
  .csr-flow-stage + .csr-flow-stage::after {
    top: -1.3rem;
    right: auto;
    left: 0;
    border: 4.5px solid transparent;
    border-top: 7px solid var(--csr-orange);
    border-bottom: 0;
  }

  .csr-steps-list,
  .csr-stats {
    grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr));
  }
  .csr-steps.is-connected .csr-step::before {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .csr-story {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .csr-title {
    font-size: 2.6rem;
  }
  .csr-body p {
    font-size: 1.7rem;
  }
  .csr-visual,
  .csr-detail,
  .csr-statement {
    margin-top: 4rem;
  }
  .csr-opener {
    margin-bottom: 4rem;
  }
  .csr-steps-list,
  .csr-stats,
  .csr-results,
  .csr-pair,
  .csr-more-grid {
    grid-template-columns: 1fr;
  }
  .csr-steps-list {
    gap: 2.4rem;
  }
  .csr-more-grid {
    gap: 4.8rem;
  }
  .csr-step-value {
    font-size: 4.2rem;
  }
  .csr-stats dt {
    font-size: 4.2rem;
    white-space: normal;
  }
  .csr-comp > div {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* ==========================================================================
   Signature widgets inside the story layout (body.cs-rhythm)
   The animated demos from casestudydetail.css keep their behaviour; here they are
   re-skinned from the sample files' brown-black to the site's ink palette and set in
   the same frame as a story section. Scoped to rebuilt pages only.
   ========================================================================== */
.cs-rhythm section > .sidebar.cs-sidebar-dark {
  background: #172125 !important;
  border-right: 1px solid #544e4e;
}
.cs-rhythm .cs-hero.cs-hero-continue {
  padding: 0 0 8rem;
  background: #172125;
}
.cs-rhythm .cs-hero.cs-hero-continue .cs-wrap {
  max-width: none;
  padding: 0 5.4rem;
}

/* panels */
.cs-rhythm .cs-normalize,
.cs-rhythm .cs-panel,
.cs-rhythm .cs-trace,
.cs-rhythm .cs-pipeline,
.cs-rhythm .cs-fan,
.cs-rhythm .cs-router,
.cs-rhythm .cs-chain {
  margin-top: 0;
  background: #1d2a2f;
  border: 1px solid #454d51;
  border-radius: 0;
}
/* inner cards and tiles */
.cs-rhythm .cs-variants .cs-v,
.cs-rhythm .cs-canon,
.cs-rhythm .cs-src,
.cs-rhythm .cs-step,
.cs-rhythm .cs-pl-step,
.cs-rhythm .cs-fan-set,
.cs-rhythm .cs-router-a,
.cs-rhythm .cs-hop,
.cs-rhythm .cs-prompt,
.cs-rhythm .cs-fan-asked,
.cs-rhythm .cs-router-asked,
.cs-rhythm .cs-chain-ask {
  background: #172125;
  border-color: #454d51;
  border-radius: 0;
}
.cs-rhythm .cs-step.cs-on,
.cs-rhythm .cs-pl-step.cs-on,
.cs-rhythm .cs-fan-set.cs-on,
.cs-rhythm .cs-router-a.cs-picked.cs-on,
.cs-rhythm .cs-hop.cs-on,
.cs-rhythm .cs-src.cs-on,
.cs-rhythm .cs-normalize.cs-run .cs-canon {
  background: #22323a;
}
.cs-rhythm .cs-fan-result,
.cs-rhythm .cs-chain-result,
.cs-rhythm .cs-src.cs-locked {
  background: #22323a;
  border-radius: 0;
}
.cs-rhythm .cs-pl-note,
.cs-rhythm .cs-pl-stats,
.cs-rhythm .cs-router-foot,
.cs-rhythm .cs-fan-rs,
.cs-rhythm .cs-chain-rs,
.cs-rhythm .cs-q {
  border-color: #454d51;
}

/* labels: monospace -> Satoshi small caps, like the story eyebrows */
.cs-rhythm .cs-normalize-lab,
.cs-rhythm .cs-demo-head,
.cs-rhythm .cs-trace-lab,
.cs-rhythm .cs-pipeline-lab,
.cs-rhythm .cs-fan-lab,
.cs-rhythm .cs-router-lab,
.cs-rhythm .cs-chain-lab,
.cs-rhythm .cs-pl-n,
.cs-rhythm .cs-fan-sl,
.cs-rhythm .cs-fan-al,
.cs-rhythm .cs-fan-rl,
.cs-rhythm .cs-router-al,
.cs-rhythm .cs-hop-k,
.cs-rhythm .cs-chain-al,
.cs-rhythm .cs-chain-rl,
.cs-rhythm .cs-canon .cs-clab,
.cs-rhythm .cs-pl-fl,
.cs-rhythm .cs-src .cs-tag {
  font-family: "Satoshi-Bold", sans-serif;
  letter-spacing: 0.1em;
}
.cs-rhythm .cs-replay,
.cs-rhythm .cs-tbtn {
  font-family: "Satoshi-Bold", sans-serif;
  border-radius: 0;
}
.cs-rhythm .cs-replay {
  background: #f77b46;
  color: #172125;
}

@media only screen and (max-width: 768px) {
  .cs-rhythm .cs-hero.cs-hero-continue {
    padding-bottom: 6rem;
  }
  .cs-rhythm .cs-hero.cs-hero-continue .cs-wrap {
    padding: 0 3.6rem; /* matches .pl-54 at this width (reset.css) */
  }
}

/* rails and widget small print: the sample-file rule sets these in monospace; match Revli */
.cs-rhythm section > .sidebar h5.color-white {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
}
.cs-rhythm .cs-hop-c,
.cs-rhythm .cs-chain-rs,
.cs-rhythm .cs-fan-rs,
.cs-rhythm .cs-fan-sn,
.cs-rhythm .cs-router-as,
.cs-rhythm .cs-router-foot,
.cs-rhythm .cs-pl-d,
.cs-rhythm .cs-pl-note,
.cs-rhythm .cs-pl-score small,
.cs-rhythm .cs-src .cs-meta,
.cs-rhythm .cs-src-note,
.cs-rhythm .cs-q,
.cs-rhythm .cs-prompt,
.cs-rhythm .cs-variants .cs-v,
.cs-rhythm .cs-canon .cs-cid,
.cs-rhythm .cs-canon .cs-cnt,
.cs-rhythm .cs-arrowcol,
.cs-rhythm .cs-mark {
  font-family: "Spline Sans", sans-serif;
  letter-spacing: 0.01em;
}
.cs-rhythm .cs-fan-result,
.cs-rhythm .cs-chain-result {
  border-color: #f77b46;
}