.case-study-template-page {
  --cs-action-blue: #0066cc;
  --cs-focus-blue: #0071e3;
  --cs-ink: #1d1d1f;
  --cs-supporting-ink: #333333;
  --cs-muted-ink: #7a7a7a;
  --cs-canvas: #ffffff;
  --cs-parchment: #f5f5f7;
  --cs-hairline: #e0e0e0;
  --cs-dark: #272729;
  --cs-dark-alt: #2a2a2c;
  --cs-dark-copy: #cccccc;
  --cs-blue-on-dark: #2997ff;
  margin: 0;
  background: var(--cs-canvas);
  color: var(--cs-ink);
  font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
}
.case-study-template, .cs-footer { font-family: inherit; }
.case-study-template *, .cs-footer * { box-sizing: border-box; }
.cs-container { width: min(1100px, calc(100% - 160px)); margin: 0 auto; }
.case-study-template { padding: 88px 0 0; background: var(--cs-canvas); }
.cs-back { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; color: var(--cs-action-blue); font-size: 14px; line-height: 1.43; text-decoration: none; }
.cs-back:hover { text-decoration: underline; }
.cs-back:focus-visible, .cs-next-card:focus-visible { outline: 2px solid var(--cs-focus-blue); outline-offset: 4px; border-radius: 5px; }
.cs-header { max-width: 780px; margin: 64px auto 0; text-align: center; }
.cs-eyebrow { margin: 0 0 14px; color: var(--cs-muted-ink); font-size: 14px; font-weight: 600; letter-spacing: -.224px; }
.cs-header h1 { margin: 0; color: var(--cs-ink); font-family: "SF Pro Display", system-ui, -apple-system, sans-serif; font-size: clamp(56px, 5vw, 64px); font-weight: 600; line-height: 1.07; letter-spacing: -.28px; }
.cs-summary { max-width: 720px; margin: 18px auto 0; color: var(--cs-supporting-ink); font-size: 24px; font-weight: 300; line-height: 1.5; }
.cs-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 40px 0 48px; }
.cs-meta-item dt { margin-bottom: 7px; color: var(--cs-muted-ink); font-size: 13px; line-height: 1.3; }
.cs-meta-item dd { margin: 0; color: var(--cs-ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.cs-visual { width: 100%; margin: 0; }
.cs-visual-surface { display: flex; min-height: 240px; align-items: center; justify-content: center; padding: 36px; background: var(--cs-parchment); }
.cs-visual-surface:has(.cs-visual-grid), .cs-visual-surface:has(.cs-flow), .cs-visual-surface:has(.cs-workflow-grid) { min-height: 0; padding: 0; background: transparent; }
.cs-visual figcaption { margin-top: 12px; color: var(--cs-muted-ink); font-size: 14px; line-height: 1.43; letter-spacing: -.224px; }
.cs-hero-visual .cs-visual-surface { min-height: 0; }
.cs-hero-visual .cs-visual-surface.is-image { position: relative; height: 440px; overflow: hidden; padding: 0; border-radius: 18px; background: var(--cs-parchment); }
.cs-visual-surface.is-image { overflow: hidden; padding: 0; }
.cs-visual-image { display: block; width: 100%; height: auto; object-fit: contain; }
.cs-hero-visual .cs-visual-image { height: 100%; object-fit: cover; object-position: center 88%; }
.cs-nda-note { margin: 10px 0 0; color: var(--cs-muted-ink); font-size: 12px; line-height: 1.3; letter-spacing: -.12px; }
.cs-tldr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; padding: 28px 32px; border-radius: 18px; background: var(--cs-parchment); }
.cs-tldr p { display: grid; align-content: start; gap: 8px; margin: 0; color: var(--cs-supporting-ink); font-size: 16px; line-height: 1.5; }
.cs-tldr strong { color: var(--cs-muted-ink); font-size: 13px; font-weight: 600; }

/* Story chapters use the portfolio's white, parchment, and near-black rhythm. */
.cs-chapter { position: relative; z-index: 0; padding: 88px 0 96px; }
.cs-chapter::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--cs-chapter-surface, var(--cs-canvas)); content: ""; }
.cs-chapter-inner { width: 100%; }
.cs-chapter--overview, .cs-chapter--process { --cs-chapter-surface: var(--cs-parchment); }
.cs-chapter--contribution, .cs-chapter--solution { --cs-chapter-surface: var(--cs-canvas); }
.cs-chapter--constraints { --cs-chapter-surface: var(--cs-parchment); }
.cs-chapter--decision { --cs-chapter-surface: var(--cs-dark); --cs-chapter-copy: var(--cs-dark-copy); }
.cs-chapter--outcome { --cs-chapter-surface: var(--cs-dark-alt); --cs-chapter-copy: var(--cs-dark-copy); }
.cs-section { display: grid; grid-template-columns: 240px minmax(0, 680px); column-gap: 64px; align-items: start; margin: 0; text-align: left; }
.cs-section-heading { min-width: 0; }
.cs-phase-label { margin: 0 0 8px; color: var(--cs-action-blue); font-size: 13px; font-weight: 600; line-height: 1.3; }
.cs-section h2 { max-width: 240px; margin: 2px 0 0; color: var(--cs-ink); font-family: "SF Pro Display", system-ui, -apple-system, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; }
.cs-section-body { display: grid; gap: 16px; max-width: 680px; margin: 0; color: var(--cs-chapter-copy, var(--cs-supporting-ink)); font-size: 18px; line-height: 1.6; letter-spacing: -.2px; }
.cs-section-body p { margin: 0; }
.cs-bullets { padding-left: 24px; text-align: left; }
.cs-bullets li { padding-left: 4px; }
.cs-chapter .cs-visual { margin-top: 48px; }
.cs-chapter .cs-visual + .cs-visual { margin-top: 56px; }
.cs-callout { margin: 0 0 8px; padding: 0; color: var(--cs-ink); font-size: 24px; font-weight: 400; line-height: 1.35; }
.cs-chapter--decision .cs-section h2, .cs-chapter--decision .cs-callout { color: var(--cs-canvas); }
.cs-chapter--decision .cs-phase-label { color: var(--cs-blue-on-dark); }
.cs-chapter--decision .cs-section-body { color: var(--cs-dark-copy); }
.cs-comparison { max-width: 900px; margin-right: auto; margin-left: 304px; }
.cs-comparison-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.cs-option { display: grid; align-content: start; gap: 10px; text-align: left; }
.cs-option-status { color: var(--cs-dark-copy); font-size: 13px; font-weight: 600; }
.cs-option.is-chosen .cs-option-status { color: var(--cs-blue-on-dark); }
.cs-option strong { color: var(--cs-canvas); font-size: 21px; font-weight: 600; }
.cs-option > span:last-child { color: var(--cs-dark-copy); font-size: 16px; line-height: 1.5; }
.cs-comparison figcaption { color: var(--cs-dark-copy); }
.cs-visual-grid { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.cs-visual-item { display: grid; align-content: start; gap: 8px; }
.cs-visual-item strong { color: var(--cs-ink); font-size: 21px; font-weight: 600; }
.cs-visual-item > span:last-child { color: var(--cs-supporting-ink); font-size: 16px; line-height: 1.5; }
.cs-flow { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 0; padding: 0; list-style: none; }
.cs-flow-step { display: grid; align-content: start; gap: 10px; min-width: 0; }
.cs-flow-number { color: var(--cs-action-blue); font-size: 13px; line-height: 1.3; }
.cs-flow-step strong { color: var(--cs-ink); font-size: 21px; font-weight: 600; }
.cs-flow-step > span:last-child { color: var(--cs-supporting-ink); font-size: 16px; line-height: 1.5; }
.cs-flow.is-compact { display: flex; align-items: center; justify-content: flex-start; gap: 18px; }
.cs-flow.is-compact .cs-flow-step { display: inline-flex; align-items: center; padding: 0; }
.cs-flow.is-compact .cs-flow-step strong { font-size: 17px; font-weight: 400; }
.cs-flow.is-compact .cs-flow-step:not(:last-child)::after { margin-left: 18px; color: var(--cs-muted-ink); content: "→"; }
.cs-process-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.cs-process-gallery .cs-visual { margin: 0; }
.cs-process-gallery .cs-visual-image { aspect-ratio: 780 / 481; border-radius: 18px; object-fit: cover; }
.cs-next-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); align-items: center; gap: 48px; margin: 80px 0; padding: 24px; border: 1px solid var(--cs-hairline); border-radius: 24px; background: var(--cs-canvas); box-shadow: 0 2px 12px rgba(29, 29, 31, .08); color: inherit; text-decoration: none; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.cs-next-card:hover { transform: translateY(-4px); border-color: #c4d9ef; box-shadow: 0 12px 28px rgba(29, 29, 31, .12); }
.cs-next-card:active { transform: translateY(-1px); }
.cs-next-card img { display: block; width: 100%; aspect-ratio: 1.7; object-fit: cover; border-radius: 18px; }
.cs-next-copy { display: grid; align-content: center; justify-items: start; gap: 12px; }
.cs-next-copy > span:first-child { color: var(--cs-muted-ink); font-size: 14px; }
.cs-next-copy strong { color: var(--cs-ink); font-size: 34px; font-weight: 600; }
.cs-next-link { display: inline-flex; gap: 8px; color: var(--cs-action-blue); font-size: 15px; font-weight: 600; }
.cs-next-card:focus-visible { border-radius: 24px; }
.cs-project-gallery { position: relative; left: 50%; width: 100vw; width: 100dvw; margin: 64px 0 72px; transform: translateX(-50%); }
.cs-project-gallery-heading { display: flex; width: min(1100px, calc(100% - 160px)); align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 48px; padding: 0; }
.cs-project-gallery-heading h2 { margin: 0; color: var(--cs-ink); font-family: "SF Pro Display", system-ui, -apple-system, sans-serif; font-size: clamp(36px, 4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -.45px; }
.cs-project-gallery-viewport { width: 100%; box-sizing: border-box; padding: 0 clamp(24px, 2.4vw, 40px) 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.cs-project-gallery-viewport::-webkit-scrollbar { display: none; }
.cs-project-gallery-viewport:focus-visible { outline: 2px solid var(--cs-focus-blue); outline-offset: 3px; }
.cs-project-gallery-track { display: flex; align-items: flex-start; gap: 22px; width: max-content; }
.cs-project-slide { display: grid; flex: 0 0 min(40vw, 620px); grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; color: var(--cs-supporting-ink); opacity: 1; text-decoration: none; scroll-snap-align: start; }
.cs-project-slide:focus-visible { outline: 2px solid var(--cs-focus-blue); outline-offset: 4px; border-radius: 24px; }
.cs-project-slide-image { position: relative; display: block; overflow: hidden; aspect-ratio: 1.54; border-radius: 24px; }
.cs-project-slide-image::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .48)); content: ""; opacity: 0; transition: opacity .2s ease; }
.cs-project-slide-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; }
.cs-project-slide-cta { position: absolute; z-index: 1; right: 20px; bottom: 18px; display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 9999px; background: #fff; color: var(--cs-action-blue); font-size: 17px; font-weight: 500; line-height: 22px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, scale .14s ease; }
.cs-project-slide:hover .cs-project-slide-cta:active { scale: .95; }
.cs-project-slide:hover .cs-project-slide-image::after,
.cs-project-slide:focus-visible .cs-project-slide-image::after,
.cs-project-slide:hover .cs-project-slide-cta,
.cs-project-slide:focus-visible .cs-project-slide-cta { opacity: 1; }
.cs-project-slide:hover .cs-project-slide-cta,
.cs-project-slide:focus-visible .cs-project-slide-cta { transform: translateY(0); }
.cs-project-slide-copy { display: block; padding: 0 16px; color: var(--cs-supporting-ink); font-size: 18px; line-height: 1.32; }
.cs-project-slide-copy strong { color: var(--cs-ink); font-weight: 600; }
.cs-project-gallery-controls { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 12px; margin: 0; padding: 0; }
.cs-project-gallery-controls button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #f1f1f3; color: #636366; font: inherit; cursor: pointer; transition: transform 140ms ease, background 160ms ease; }
.cs-project-gallery-controls button:hover:not(:disabled) { background: #e5e5e7; }
.cs-project-gallery-controls button:active:not(:disabled) { transform: scale(.95); }
.cs-project-gallery-controls button:disabled { background: #f5f5f7; color: #b8b8bc; cursor: default; }
.cs-project-gallery-controls button:focus-visible { outline: 2px solid var(--cs-focus-blue); outline-offset: 3px; }
.cs-gallery-chevron { display: block; width: 10px; height: 10px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; }
.cs-gallery-chevron.is-left { transform: rotate(-135deg) translate(-1px, -1px); }
.cs-gallery-chevron.is-right { transform: rotate(45deg) translate(-1px, -1px); }
.cs-footer { padding: 64px 0; background: var(--cs-parchment); color: var(--cs-muted-ink); }
.cs-footer .cs-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cs-footer > div > span { color: var(--cs-muted-ink); font-size: 12px; line-height: 1.3; letter-spacing: -.12px; }

@media (max-width: 1024px) {
  .cs-container { width: min(1100px, calc(100% - 96px)); }
  .cs-project-gallery-heading { width: min(1100px, calc(100% - 96px)); }
  .cs-chapter { padding: 76px 0 80px; }
  .cs-flow, .cs-visual-grid { gap: 32px; }
  .cs-section { grid-template-columns: 200px minmax(0, 680px); column-gap: 40px; }
  .cs-comparison { margin-left: 240px; }
}
@media (max-width: 640px) {
  .cs-container { width: calc(100% - 48px); }
  .cs-project-gallery-heading { width: calc(100% - 48px); }
  .case-study-template { padding-top: 80px; }
  .cs-header { margin-top: 40px; }
  .cs-header h1 { font-size: 34px; }
  .cs-summary { margin-top: 12px; font-size: 20px; }
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 28px 0 32px; }
  .cs-hero-visual .cs-visual-surface.is-image { height: 280px; }
  .cs-tldr { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; padding: 20px; }
  .cs-tldr p { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; font-size: 15px; }
  .cs-chapter { padding: 56px 0 64px; }
  .cs-section { grid-template-columns: 1fr; gap: 12px; }
  .cs-section h2 { max-width: none; margin-bottom: 0; font-size: 22px; }
  .cs-section-body { font-size: 16px; }
  .cs-chapter .cs-visual { margin-top: 32px; }
  .cs-chapter .cs-visual + .cs-visual { margin-top: 36px; }
  .cs-callout { font-size: 23px; }
  .cs-comparison-options, .cs-visual-grid, .cs-flow:not(.is-compact) { grid-template-columns: 1fr; gap: 24px; }
  .cs-process-gallery { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .cs-comparison { margin-left: 0; }
  .cs-flow.is-compact { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cs-flow.is-compact .cs-flow-step:not(:last-child)::after { margin: 8px 0 0; content: "↓"; }
  .cs-next-card { grid-template-columns: 1fr; gap: 24px; margin: 56px 0; }
  .cs-next-card img { grid-row: 1; }
  .cs-next-copy strong { font-size: 28px; }
  .cs-project-gallery { margin: 48px 0; }
  .cs-project-gallery-heading { margin-bottom: 28px; }
  .cs-project-gallery-heading h2 { font-size: 34px; }
  .cs-project-gallery-track { gap: 16px; }
  .cs-project-slide { flex-basis: 82vw; gap: 12px; }
  .cs-project-slide-image { border-radius: 18px; }
  .cs-project-slide-copy { padding: 0 8px; font-size: 15px; }
  .cs-project-gallery-controls { gap: 8px; }
  .cs-project-gallery-controls button { width: 44px; height: 44px; }
  .cs-footer { padding: 48px 0; }
  .cs-footer .cs-container { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 419px) {
  .cs-header h1 { font-size: 28px; }
  .cs-summary { font-size: 18px; }
  .cs-tldr p { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-next-card { transition: none; }
  .cs-next-card:hover,
  .cs-next-card:active { transform: none; }
  .cs-project-gallery-viewport { scroll-behavior: auto; }
}