/* A case study page (case-<slug>.html), rendered by case-page.js from CASES in cases-data.js.
   Paper page: a centred hero like the service pages, then the photo, then the project facts pinned
   on the left while the challenge, solution, how it works and results scroll on the right. */

.cl {
  --people: #FF6B2C; --agents: #12492E; --data: #1A7FB8;
  --text-muted: #4E5A53; --line: #E4DFD3;
  --stick: 92px; /* below the sticky nav */
  background: var(--paper); color: var(--ink);
}
.cl-ink { --agents: #CCF664; --data: #22ACF5; --text-muted: var(--on-dark-muted); --line: var(--line-dark); background: var(--ink); color: var(--on-dark); }

/* Type and shared parts */
.cl-kicker { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tangerine); }
.cl-label { margin-bottom: .75rem; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cl-title { max-width: 22ch; font-size: clamp(2.25rem, 4.6vw, 4rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.cl .cl-h { max-width: 24ch; margin-bottom: 1.25rem; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.cl-lede { max-width: 58ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--text-muted); }
.cl p { text-wrap: pretty; }
.cl-case-trail { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .45rem 2.25rem; max-width: 100%; margin: 0 0 1.25rem; }
.cl-case-trail .kicker { margin: 0; }
.cl-case-trail a { color: inherit; }
.cl-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); background: var(--cloud); }
.cl-chip { position: absolute; top: 14px; left: 14px; padding: .35rem .65rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.cl-chip--dark { background: rgba(14, 37, 27, .82); color: var(--paper); }

.cl-stat { display: grid; gap: .4rem; align-content: start; }
.cl-stat strong { font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 400; letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.cl-stat span { max-width: 22ch; font-size: .9rem; line-height: 1.4; color: var(--text-muted); }

.cl-facts { display: grid; gap: 0; }
.cl-facts div { display: grid; gap: .2rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.cl-facts dt { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cl-facts dd { margin: 0; font-size: .95rem; line-height: 1.4; }

.cl-quote { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid var(--tangerine); }
.cl-quote p { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.25; }
.cl-quote footer { margin-top: .6rem; font-size: .85rem; color: var(--text-muted); }

.cl-points { display: grid; gap: 0; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.cl-points li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.cl-n { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.cl-points h3 { margin-bottom: .3rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; }
.cl-points p { font-size: .95rem; line-height: 1.55; color: var(--text-muted); }


/* The flow diagram (after GiantKelp's user/agent/data diagram) */
.cl-flow { margin: 0; }
.cl-fl-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2.25rem; }
.cl-fl-col { position: relative; display: grid; grid-template-rows: auto auto auto auto auto; justify-items: stretch; align-content: start; gap: .5rem; }
.cl-fl-col + .cl-fl-col::before { content: ""; position: absolute; top: calc(1.4rem + 2.1rem); left: -2.1rem; width: 1.9rem; height: 1px; background: currentColor; opacity: .5; }
.cl-fl-col + .cl-fl-col::after { content: ""; position: absolute; top: calc(1.4rem + 2.1rem - 3px); left: -.45rem; border: 3.5px solid transparent; border-left: 5px solid currentColor; opacity: .5; }
.cl-fl-who { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--text-muted); }
.cl-fl-who svg { width: 14px; height: 14px; fill: none; stroke: var(--k); stroke-width: 1.6; }
.cl-fl-node { display: flex; align-items: center; min-height: 4.2rem; padding: .75rem .9rem; border: 1.5px solid var(--k); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--k) 9%, transparent); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; line-height: 1.4; }
.cl-fl-data { min-height: 3.4rem; font-size: .75rem; }
.cl-fl-up { justify-self: center; width: 1px; height: 1.6rem; background: currentColor; opacity: .5; }
.cl-k-people { --k: var(--people); }
.cl-k-agents { --k: var(--agents); }
.cl-k-data { --k: var(--data); }
.cl-fl-loop { margin-top: 1.75rem; font-size: .88rem; color: var(--text-muted); }
.cl-fl-loop b { margin-right: .6rem; font-weight: 500; color: var(--agents); }
.cl-flow figcaption { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--text-muted); }

/* Related case studies and the closing call to action */
.cl-related { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.cl-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 2rem; }
/* The Customers page's cards (spotlight.css), laid out in a row instead of the carousel */
.cl-rel-grid .proof-card { position: relative; top: auto; left: auto; }
.cl-rel-grid .proof-photo { height: auto; aspect-ratio: 1 / 1.25; }
.cl-cta { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; }
.cl-cta h2 { max-width: 20ch; margin: 0 auto 2rem; font-size: var(--title-size); font-weight: 400; letter-spacing: -0.045em; line-height: 1.05; text-wrap: balance; }
.cl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Hero matches the service pages (ip-rooted--center in v2/v2.css): one centred kicker,
   then the title, lede, and the result, then the case photo. The client is named in the rail. */
.cl-case-meta { display: grid; justify-items: center; gap: .35rem; margin: 1.75rem auto 0; max-width: 36rem; text-align: center; color: var(--text-muted); font-size: 1rem; }
.cl-case-result { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--forest); }
.cl-case-result-note { max-width: 36rem; font-size: .95rem; line-height: 1.45; text-wrap: balance; }
.cl-case-hero .clb-media { margin-top: clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; }
.v2 #main > section.cl-case-hero { padding-bottom: 0; } /* the space under the photo comes from .clb-body alone, matching the space above it */
.clb-media { aspect-ratio: 21 / 8; }
.clb-body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.clb-side { position: sticky; top: var(--stick); align-self: start; display: grid; gap: 1.75rem; }
.clb-side .cl-kicker { margin-bottom: -.75rem; }
.clb-main { max-width: 760px; }
.clb-main section { scroll-margin-top: var(--stick); padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.clb-main section > p:not(.cl-label):not(.cl-lede) { font-size: 1.02rem; line-height: 1.7; color: var(--text-muted); }
.clb-main section > p + p { margin-top: 1rem; }
.clb-main .cl-flow { padding: 2rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); --agents: #CCF664; --data: #22ACF5; --text-muted: var(--on-dark-muted); --line: var(--line-dark); }
.clb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clb-stat { display: grid; gap: .5rem; align-content: start; padding: 1.5rem; border-radius: var(--radius); background: var(--white); }
.clb-stat strong { font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.clb-stat span { font-size: .9rem; font-weight: 500; }
.clb-stat p { font-size: .9rem; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 980px) {
  .clb-body { grid-template-columns: minmax(0, 1fr); }
  .clb-side { position: static; }
  .cl-fl-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .cl-fl-col + .cl-fl-col::before, .cl-fl-col + .cl-fl-col::after { display: none; }
}
@media (max-width: 640px) {
  .cl-rel-grid { grid-template-columns: 1fr; }
  .clb-stats { grid-template-columns: 1fr; }
  .clb-media { aspect-ratio: 4 / 3; }
}