#case-studies { background: #f0eee7; color: #182322; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10002; padding: 10px 14px; color: #fff; background: #143d38; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.case-page a:focus-visible, #case-studies a:focus-visible, .skip-link:focus-visible { outline: 3px solid #d48a28; outline-offset: 4px; }
.case-index .section-label { color: #61716d; }
.case-feature { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr); gap: 56px; align-items: center; padding: 48px 0 64px; border-bottom: 1px solid rgba(24,35,34,.18); }
.case-kicker, .case-status, .evidence-label { color: #2b7067; font: 600 .72rem/1.4 var(--font-mono); text-transform: uppercase; }
.case-feature-title { margin: 12px 0 20px; font: 600 clamp(2.6rem, 6vw, 5rem)/1 var(--font-display); letter-spacing: 0; }
.case-feature-summary { max-width: 34rem; color: #52615d; font-size: 1rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 24px; }
.hero-actions a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .84rem; font-weight: 600; }
.hero-action-primary { padding: 0 16px; color: #f9f8f1; background: #315e55; }
.hero-action-secondary { color: #d4a24c; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 520px) { .hero-actions { gap: 10px 16px; } .hero-actions a { font-size: .78rem; } }
.case-link { display: inline-flex; gap: 14px; align-items: center; padding: 14px 18px; margin-top: 24px; background: #143d38; color: #f9f8f1; font-size: .84rem; font-weight: 600; }
.pipeline-figure { margin: 0; padding: 22px; background: #e5e3da; border: 1px solid rgba(24,35,34,.14); }
.pipeline-figure img { width: 100%; height: auto; }
.pipeline-figure figcaption { margin-top: 14px; color: #61716d; font-size: .74rem; line-height: 1.6; }
.case-list { display: grid; }
.case-row { display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: 20px; padding: 22px 4px; border-bottom: 1px solid rgba(24,35,34,.16); color: #182322; transition: padding .2s ease, color .2s ease; }
.case-row:hover { padding-left: 12px; color: #2b7067; }
.case-index-number { color: #7b8984; font: .75rem var(--font-mono); }
.case-row strong, .case-row small { display: block; }
.case-row strong { font: 600 1.2rem var(--font-display); }
.case-row small { margin-top: 5px; color: #64716d; font-size: .8rem; line-height: 1.5; }
.case-arrow { justify-self: end; }
.case-evidence-note { margin-top: 24px; color: #64716d; font-size: .75rem; line-height: 1.6; }
.case-page { min-height: 100vh; padding: 132px 24px 80px; color: #182322; background: #f0eee7; }
.case-page, .case-page a, .case-page button { cursor: auto; }
.case-page-inner { width: min(100%, 1120px); margin: auto; }
.case-breadcrumb { margin-bottom: 52px; color: #61716d; font: .75rem var(--font-mono); }
.case-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.case-hero { max-width: 900px; padding-bottom: 42px; border-bottom: 1px solid rgba(24,35,34,.2); }
.case-hero h1 { margin: 12px 0 18px; font: 600 clamp(2.8rem, 7vw, 6.2rem)/.98 var(--font-display); letter-spacing: 0; }
.case-deck { max-width: 760px; color: #4f605b; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.7; }
.case-meta { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 24px; color: #52615d; font: .72rem var(--font-mono); }
.case-status-block { margin: 30px 0 56px; padding: 18px 22px; border-left: 3px solid #b7802c; background: #e8e2d5; color: #36443f; line-height: 1.65; }
.case-status-block strong { display: block; margin-bottom: 4px; color: #664b20; font-size: .78rem; text-transform: uppercase; }
.case-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 50px; }
.case-toc { position: sticky; top: 100px; align-self: start; display: grid; gap: 12px; color: #63726d; font-size: .75rem; }
.case-toc a:hover { color: #143d38; }
.case-content { min-width: 0; }
.case-content section { padding: 0 0 42px; margin-bottom: 42px; border-bottom: 1px solid rgba(24,35,34,.14); scroll-margin-top: 100px; }
.case-content h2 { margin: 0 0 18px; font: 600 1.85rem/1.2 var(--font-display); letter-spacing: 0; }
.case-content h3 { margin: 24px 0 10px; font: 600 1rem var(--font-display); }
.case-content p, .case-content li { color: #52615d; font-size: .93rem; line-height: 1.8; }
.case-content p + p { margin-top: 12px; }
.case-content code { overflow-wrap: anywhere; word-break: break-word; }
.case-content ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.case-content figure { margin: 24px 0; padding: 16px; border: 1px solid rgba(24,35,34,.16); background: #e8e6df; }
.case-content figure img { width: 100%; height: auto; }
.case-content figcaption { margin-top: 10px; color: #64716d; font-size: .73rem; line-height: 1.6; }
.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.evidence-item { padding: 17px; border-top: 2px solid #2b7067; background: #e8e6df; }
.evidence-item p { margin-top: 8px; font-size: .83rem; }
.evidence-item a { color: #1b6258; text-decoration: underline; text-underline-offset: 3px; }
.product-image { width: 100%; height: auto; }
.case-contact { display: inline-flex; padding: 15px 20px; background: #143d38; color: white; font-weight: 600; }
.case-footer-nav { display: flex; justify-content: space-between; gap: 20px; padding-top: 30px; color: #1b6258; font-size: .85rem; }
@media (max-width: 800px) { .case-feature { grid-template-columns: 1fr; gap: 28px; } .case-body { grid-template-columns: 1fr; gap: 30px; } .case-toc { position: static; display: flex; overflow-x: auto; padding-bottom: 8px; } .case-toc a { white-space: nowrap; } }
@media (max-width: 520px) { .case-page { padding: 108px 18px 56px; } .case-breadcrumb { margin-bottom: 34px; } .case-row { grid-template-columns: 32px 1fr 18px; gap: 12px; } .case-row strong { font-size: 1rem; } .evidence-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .case-row { transition: none; scroll-behavior: auto; } }
