/* Scope: only the two 2026-10-30 client stories; native case template stays intact. */
.sf-client-case .sf-case-story {
  --story-ink: #1f2328;
  --story-muted: #60636a;
  --story-paper: #f7f5f1;
  --story-line: #ddd8d0;
  --story-accent: #ac102a;
  color: var(--story-ink);
  font-family: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;
}
.sf-client-case .sf-case-story *, .sf-client-case .sf-case-story *::before,
.sf-client-case .sf-case-story *::after { box-sizing: border-box; }
.sf-client-case .sf-case-story :is(section, div, figure) { min-width: 0; }
.sf-client-case .sf-case-story > p { margin: 0 0 1.35em; }
.sf-client-case .sf-case-story .sf-story-lead {
  margin: 0 0 30px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--story-accent);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.7;
  color: var(--story-ink);
}
.sf-client-case .sf-case-story .sf-story-route { margin: 34px 0 46px; }
.sf-client-case .sf-case-story .sf-story-route > p {
  margin: 0 0 12px;
  color: var(--story-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sf-client-case .sf-case-story .sf-story-route ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--story-line);
}
.sf-client-case .sf-case-story .sf-story-route--four ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-client-case .sf-case-story .sf-story-route li { margin: 0; padding: 0; }
.sf-client-case .sf-case-story .sf-story-route a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 74px;
  padding: 17px 14px 17px 0;
  color: var(--story-ink);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
}
.sf-client-case .sf-case-story .sf-story-route a span {
  padding-top: 1px;
  color: var(--story-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.sf-client-case .sf-case-story .sf-story-route a:hover { color: var(--story-accent); text-decoration: underline; text-underline-offset: 4px; }
.sf-client-case .sf-case-story .sf-story-step {
  margin: 44px 0 9px;
  color: var(--story-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sf-client-case .sf-case-story .sf-story-step + h2 { margin-top: 0; }
.sf-client-case .sf-case-story h2 { font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.sf-client-case .sf-case-story figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 28px auto 34px;
  padding: 16px;
  background: var(--story-paper);
  border: 1px solid var(--story-line);
  border-radius: 3px;
}
.sf-client-case .sf-case-story > figure { max-width: 450px; }
.sf-client-case .sf-client-case__body .sf-case-story figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 650px;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 0;
}
.sf-client-case .sf-case-story figcaption {
  align-self: stretch;
  margin: 12px 0 0;
  color: var(--story-muted);
  font-size: 12px;
  line-height: 1.6;
}
.sf-client-case .sf-case-story .sf-story-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin: 28px 0 40px;
}
.sf-client-case .sf-case-story .sf-story-photo-pair figure { width: 100%; margin: 0; padding: 12px; }
.sf-client-case .sf-case-story .sf-story-next {
  margin: 36px 0;
  padding: 26px 28px;
  background: var(--story-paper);
  border-top: 2px solid var(--story-accent);
}
.sf-client-case .sf-case-story .sf-story-next > h2 { margin: 0 0 16px; font-size: 23px; }
.sf-client-case .sf-case-story .sf-story-next > :last-child { margin-bottom: 0; }
.sf-client-case .sf-case-story .sf-story-next ul { margin: 0; }
.sf-client-case .sf-case-story .sf-story-next li { padding-left: 3px; }
.sf-client-case .sf-case-story details {
  margin: 0;
  border-top: 1px solid var(--story-line);
  background: transparent;
}
.sf-client-case .sf-case-story details:last-of-type { border-bottom: 1px solid var(--story-line); }
.sf-client-case .sf-case-story summary {
  padding: 20px 4px;
  color: var(--story-ink);
  font: 700 16px/1.5 "Hanken Grotesk", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.sf-client-case .sf-case-story summary::marker { color: var(--story-accent); font-size: .8em; }
.sf-client-case .sf-case-story details[open] summary { padding-bottom: 12px; }
.sf-client-case .sf-case-story details > p { margin: 0 4px 22px; color: var(--story-muted); font-size: 16px; line-height: 1.7; }
.sf-client-case .sf-case-story .sf-story-contact { margin: 38px 0 0; padding-top: 24px; border-top: 1px solid var(--story-line); }
.sf-client-case .sf-case-story .sf-story-contact h2 { margin-top: 0; }
.sf-client-case .sf-case-story a:focus-visible,
.sf-client-case .sf-case-story summary:focus-visible { outline: 3px solid #0b57d0; outline-offset: 4px; }
@media (max-width: 680px) {
  .sf-client-case .sf-case-story .sf-story-route--four ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-client-case .sf-case-story .sf-story-route--four li:nth-child(n+3) { border-top: 1px solid var(--story-line); }
  .sf-client-case .sf-case-story .sf-story-route a { min-height: 72px; padding-right: 8px; font-size: 12px; gap: 7px; }
  .sf-client-case .sf-case-story .sf-story-photo-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sf-client-case .sf-case-story .sf-story-photo-pair figure { max-width: 450px; }
  .sf-client-case .sf-client-case__body .sf-case-story figure img { max-height: 70svh; }
  .sf-client-case .sf-case-story .sf-story-next { padding: 23px 20px; }
  .sf-client-case .sf-case-story .sf-story-lead { padding-left: 17px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-client-case .sf-case-story * { scroll-behavior: auto !important; }
}
@media print {
  .sf-client-case .sf-case-story .sf-story-route { display: none; }
  .sf-client-case .sf-case-story figure { break-inside: avoid; border: 0; }
  .sf-client-case .sf-case-story details > p { display: block !important; }
}
