/* Case study pages (/work/<slug>). Loads after site-v2.css and only adds what those pages need. */

.crumbs { font-size: 14px; font-weight: 600; color: var(--ink-3); margin: 0 0 12px; }
.crumbs a { color: var(--ink-2); }

/* Stats under the hero: 2x2 on phones and tablets, four across on wide screens. The numbers are
   final in the html; case-stats.js counts them up once and pins each width so nothing moves. */
.cs-stats { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-stats li { display: grid; align-content: start; gap: 8px; padding: clamp(18px, 2.4vw, 32px) clamp(12px, 2vw, 28px); min-width: 0; }
.cs-stats li:nth-child(odd) { padding-left: 0; }
.cs-stats li:nth-child(even) { border-left: 1px solid var(--line); }
.cs-stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
.cs-stat-num {
  display: inline-block; justify-self: start; white-space: nowrap;
  font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 112, "wght" 800;
  font-size: min(10.5vw, 96px); line-height: 0.95; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.cs-stats span { font-size: clamp(14px, 1.1vw, 17px); font-weight: 500; color: var(--ink-3); line-height: 1.3; }
@media (min-width: 1000px) {
  .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-stats li:nth-child(odd) { padding-left: clamp(12px, 2vw, 28px); }
  .cs-stats li:first-child { padding-left: 0; }
  .cs-stats li + li { border-left: 1px solid var(--line); }
  .cs-stats li:nth-child(n+3) { border-top: 0; }
  .cs-stat-num { font-size: min(4.9vw, 76px); }
}

/* Screens: the composites are 16:10 on a dark background, so they get a radius and no border */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: clamp(12px, 1.6vw, 24px); background: #14101a; }
.shot figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-3); max-width: 70ch; }

/* Page images open large in the strip's lightbox */
.cs-zoom { display: block; width: 100%; padding: 0; border: 0; margin: 0; background: none; font: inherit; color: inherit; text-align: left; border-radius: clamp(12px, 1.6vw, 24px); cursor: zoom-in; }
.cs-zoom img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
@media (hover: hover) {
  .cs-zoom:hover img { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgba(10, 10, 10, 0.35); }
}
.cs-zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.cs-review-zoom { max-width: 670px; border-radius: 14px; }

/* Lead strip: every screen in one row, full bleed. Without the script (or with reduced motion)
   it is a plain horizontal scroll row; case-strip.js adds .is-live and drives it with a transform. */
.cs-lead-shot { --card-h: clamp(260px, 26vw, 400px); }
.cs-strip { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.cs-strip-track { list-style: none; margin: 0; padding: 8px var(--pad) 48px; display: flex; gap: clamp(14px, 1.6vw, 26px); width: max-content; }
.cs-strip.is-live { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cs-strip.is-live.is-dragging { cursor: grabbing; }
.cs-strip.is-live .cs-strip-track { padding-left: 0; padding-right: 0; gap: 0; will-change: transform; }
.cs-strip.is-live .cs-strip-track > li { padding-right: clamp(14px, 1.6vw, 26px); }
.cs-card {
  display: block; height: var(--card-h); padding: 0; border: 0; margin: 0;
  background: none; border-radius: 12px; cursor: zoom-in;
  transition: transform 0.25s ease;
}
/* Each screen is a transparent image of the whole device, so the shadow follows the device's own shape. */
.cs-card img {
  display: block; height: 100%; width: auto; -webkit-user-drag: none;
  filter: drop-shadow(0 18px 22px rgba(10, 10, 10, 0.22)) drop-shadow(0 2px 3px rgba(10, 10, 10, 0.12));
}
.cs-card:hover { transform: translateY(-4px); }
.cs-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.cs-strip.is-dragging .cs-card { cursor: grabbing; }
.cs-strip-foot { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.cs-strip-foot p { margin: 0; font-size: 15px; color: var(--ink-3); max-width: 70ch; }

/* Lightbox */
.cs-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain; touch-action: none; background: rgba(10, 10, 10, 0.95); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cs-lightbox::backdrop { background: transparent; }
.cs-lightbox[open] { display: grid; place-items: center; }
.cs-lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 64px clamp(16px, 7vw, 120px) 24px; max-width: 100%; box-sizing: border-box; }
.cs-lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; transition: transform 0.25s ease; }
/* Zoomed: the image sits above the caption and buttons stay on top. No easing while a finger or the mouse moves it. */
.cs-lightbox.is-zoomed img { position: relative; z-index: 1; cursor: zoom-out; }
.cs-lightbox.is-zoomed .cs-lb-btn { z-index: 2; }
.cs-lightbox.is-panning img { transition: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .cs-lightbox img, .cs-zoom img { transition: none; } }
.cs-lightbox figcaption { font-size: 15px; font-weight: 600; text-align: center; }
.cs-lb-count { color: rgba(255, 255, 255, 0.55); font-weight: 500; margin-left: 8px; }
.cs-lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.cs-lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.cs-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-lb-prev { left: clamp(8px, 2vw, 32px); top: 50%; transform: translateY(-50%); }
.cs-lb-next { right: clamp(8px, 2vw, 32px); top: 50%; transform: translateY(-50%); }
.cs-lb-close { right: clamp(8px, 2vw, 32px); top: 12px; }
@media (max-width: 640px) {
  .cs-lightbox figure { padding: 64px 12px 84px; }
  .cs-lightbox img { max-height: calc(100dvh - 190px); }
  .cs-lb-prev, .cs-lb-next { top: auto; bottom: 16px; transform: none; }
  .cs-lb-prev { left: calc(50% - 60px); }
  .cs-lb-next { right: calc(50% - 60px); }
}

.cs-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cs-facts { grid-template-columns: repeat(2, 1fr); column-gap: clamp(20px, 3vw, 48px); } }
@media (min-width: 1000px) { .cs-facts { grid-template-columns: repeat(4, 1fr); } }
.cs-facts li { padding: 16px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.cs-facts span { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.cs-facts b { font-weight: 600; font-size: clamp(17px, 1.3vw, 20px); }

.cs-h2 { font-size: clamp(36px, 5vw, 80px); }
.cs-body > * + * { margin-top: clamp(28px, 4vw, 56px); }

/* Two systems side by side on wide screens */
.cs-pair { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .cs-pair { grid-template-columns: 1fr 1fr; } }
.cs-part h3 { margin: 0 0 8px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cs-part p { margin: 0 0 0.8em; color: var(--ink-2); max-width: 60ch; font-size: clamp(16px, 1.2vw, 19px); }
.cs-part ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: clamp(16px, 1.2vw, 19px); }
.cs-part li + li { margin-top: 4px; }

/* Review: the text quote, with the real Google review screenshot beside it on wide screens */
.cs-review { display: grid; gap: clamp(24px, 3vw, 48px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .cs-review { grid-template-columns: 1fr 1fr; align-items: center; } }
.cs-review-shot { display: block; width: 100%; max-width: 670px; height: auto; border-radius: 14px; background: #131314; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 32px -8px rgba(0, 0, 0, 0.22); }
.cs-quote { margin: 0; }
.cs-quote blockquote { margin: 0; }
.cs-quote p { margin: 0; font-size: clamp(22px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: 36ch; }
.cs-quote figcaption { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.cs-pair { margin-top: 24px; }
.cs-gap { margin-top: 20px; }
.cs-link { text-decoration: underline; text-underline-offset: 0.18em; color: var(--ink); }
.cs-plain { border-top: 1px solid var(--line); }
.cs-plain .cs-pair { margin-top: 0; padding-top: 24px; }

/* Reading: small grey labels go darker so they pass AA on white (#6b6b6b is 5.3:1) */
main { --ink-3: #6b6b6b; }

/* Each section opens with one darker sentence at the h3 size, then the detail under it */
.cs-lead { margin: 0 0 16px; font-size: clamp(21px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); max-width: 30ch; text-wrap: pretty; }
.prose .cs-lead, .faq .cs-lead { margin-bottom: 20px; font-size: clamp(21px, 2vw, 30px); color: var(--ink); max-width: 30ch; }
.faq .cs-lead { margin: 0 0 28px; }
.cs-lead + .steps { margin-top: 24px; }
.cs-detail { margin: 0; font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); max-width: 62ch; }
.prose p { max-width: 45ch; }

/* Keep detail text near 65 characters a line on wide screens */
.faq p, .cs-part p { max-width: 46ch; }
@media (min-width: 900px) { .steps li { padding-right: 120px; } }

/* Before and after: two columns, stacked on phones */
.cs-compare { display: grid; gap: 28px; margin: 28px 0; }
@media (min-width: 560px) { .cs-compare { grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); } }
.cs-compare h3 { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.cs-compare-col.is-after h3 { border-top: 1.5px solid var(--ink); color: var(--ink); }
.cs-compare ul { list-style: none; margin: 0; padding: 0; }
.cs-compare li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; color: var(--ink-2); }
.cs-compare-col.is-after li { color: var(--ink); }

/* Phones: a touch smaller and darker body text, roomier lines, more air between sections */
@media (max-width: 640px) {
  main { --ink-2: #333333; }
  .prose p, .cs-detail, .cs-part p, .cs-part ul, .faq p, .steps li, .cs-compare li { font-size: 16px; line-height: 1.6; }
  .cs-compare li { line-height: 1.45; }
  .cs-lead, .prose .cs-lead, .faq .cs-lead { font-size: 21px; line-height: 1.3; }
  .block.bordered { padding-top: 64px; padding-bottom: 64px; }
}