.case-detail-page { --detail-ink: #152028; --detail-muted: #6a7b82; --detail-line: #d9e9ed; --detail-blue: #168eae; --detail-cyan: #28c5c5; --detail-violet: #6c9be8; background: #fff; }
.case-detail-page main { overflow: clip; }
.case-detail-hero { padding-top: 150px; padding-bottom: 88px; }
.case-breadcrumb { display: flex; align-items: center; gap: 10px; color: #8a9ba0; font-size: 13px; }
.case-breadcrumb a { color: #6d8e95; text-decoration: none; }
.case-breadcrumb a:hover, .case-breadcrumb a:focus-visible { color: var(--detail-blue); }
.case-detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr); gap: clamp(56px, 7vw, 112px); align-items: stretch; margin-top: 55px; }
.case-detail-hero-copy { max-width: 650px; }
.case-detail-hero-copy h1 { max-width: 640px; margin-top: 18px; color: var(--detail-ink); font-size: clamp(40px, 3.85vw, 60px); font-weight: 300; line-height: 1.22; letter-spacing: -.03em; text-wrap: balance; }
.case-detail-hero-copy > p { max-width: 600px; margin-top: 28px; color: var(--detail-muted); font-size: 16px; line-height: 1.95; }
.case-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.case-detail-tags span { padding: 8px 12px; border: 1px solid #cce5e9; border-radius: 999px; color: #398490; font-size: 12px; }
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-top: 42px; overflow: hidden; border: 1px solid var(--detail-line); border-radius: 15px; background: linear-gradient(145deg, #fbfefe, #f7fbfc); }
.case-facts div { min-width: 0; padding: 17px 19px 18px; }
.case-facts div:nth-child(odd) { border-right: 1px solid var(--detail-line); }
.case-facts div:nth-child(n+3) { border-top: 1px solid var(--detail-line); }
.case-facts dt { color: #94a5a9; font-size: 12px; }
.case-facts dd { margin-top: 7px; overflow-wrap: anywhere; color: #25373d; font-size: 14px; }
.case-detail-cover { position: relative; display: block; align-self: start; max-width: 620px; margin: 0; border-radius: 24px; }
.case-detail-cover::after { content: ''; position: absolute; inset: 0; border: 1px solid rgb(71 166 202 / 48%); border-radius: inherit; pointer-events: none; }
.case-detail-cover img { display: block; width: 100%; min-height: 560px; object-fit: cover; border-radius: inherit; box-shadow: 0 28px 70px rgb(45 107 131 / 12%); }
.case-impact { padding-block: 86px 96px; border-top: 1px solid #eff6f7; border-bottom: 1px solid #e8f1f3; }
.case-impact-head { display: block; }
.case-impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 38px; }
.case-impact-grid > div { padding: 23px 25px 24px; border: 1px solid var(--detail-line); border-radius: 14px; background: linear-gradient(150deg, #f9fdfe, #fff); }
.case-impact-grid strong { display: block; color: #0b7f9c; font-size: clamp(36px, 4vw, 58px); font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.case-impact-grid span { display: block; margin-top: 17px; color: #2d454c; font-size: 14px; }
.case-impact-grid small { display: block; margin-top: 8px; color: #8b9da1; font-size: 11px; line-height: 1.6; }
.case-article { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: clamp(50px, 9vw, 148px); padding-top: 125px; padding-bottom: 140px; }
.case-toc { position: sticky; top: 120px; align-self: start; display: grid; gap: 18px; padding-top: 5px; }
.case-toc > span { color: #9aacb0; font-size: 12px; letter-spacing: .08em; }
.case-toc a { position: relative; padding-left: 16px; color: #8b9ba0; font-size: 14px; text-decoration: none; transition: color .25s ease, transform .25s ease; }
.case-toc a::before { content: ''; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: #cadcdf; transition: background .25s ease, transform .25s ease; }
.case-toc a:hover, .case-toc a:focus-visible, .case-toc a.is-active { color: #0a9db0; transform: translateX(3px); }
.case-toc a:hover::before, .case-toc a:focus-visible::before, .case-toc a.is-active::before { background: #18b5bd; transform: scale(1.4); }
.case-story { min-width: 0; }
.case-story-section { position: relative; padding-bottom: 112px; margin-bottom: 112px; border-bottom: 1px solid #e8f1f3; scroll-margin-top: 120px; }
.case-story-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.case-section-index { position: absolute; top: 3px; left: -54px; color: #a5b8bc; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .12em; }
.case-section-heading h2 { max-width: 710px; margin-top: 17px; color: var(--detail-ink); font-size: clamp(32px, 3.2vw, 48px); font-weight: 300; line-height: 1.28; letter-spacing: -.035em; }
.case-story-section > p { max-width: 710px; margin-top: 28px; color: #566a71; font-size: 16px; line-height: 2; }
.case-challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.case-challenge-grid > div { min-height: 160px; padding: 23px 21px; border-radius: 12px; background: #f5fbfc; }
.case-challenge-grid span { color: #1a9dae; font-size: 12px; }
.case-challenge-grid h3 { margin-top: 23px; color: #263d44; font-size: 18px; font-weight: 400; }
.case-challenge-grid p { margin-top: 9px; color: #73878c; font-size: 13px; line-height: 1.7; }
.research-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; margin-top: 50px; }
.research-main, .research-side { border: 1px solid var(--detail-line); border-radius: 14px; background: #fff; }
.research-main { padding: 26px 27px 28px; }
.research-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; color: #5e767c; font-size: 13px; }
.research-title strong { color: #0a99ad; font-size: 38px; font-weight: 300; letter-spacing: -.04em; }
.research-bars { display: grid; gap: 18px; margin-top: 32px; }
.research-bars > div { display: grid; grid-template-columns: 86px minmax(0, 1fr) 28px; align-items: center; gap: 11px; color: #71868b; font-size: 11px; }
.research-bars i { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #edf4f5; }
.research-bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--value); border-radius: inherit; background: linear-gradient(90deg, #61cfd0, #5d8fe7); }
.research-bars strong { color: #39656e; font-size: 12px; font-weight: 500; text-align: right; }
.research-side { display: grid; padding: 10px 18px; }
.research-side div { display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #edf4f5; }
.research-side div:last-child { border-bottom: 0; }
.research-side strong { color: #267b92; font-size: 32px; font-weight: 300; }
.research-side span { margin-top: 5px; color: #8da1a5; font-size: 11px; }
.case-note { color: #9aa9ad !important; font-size: 12px !important; }
.solution-steps { display: grid; gap: 0; margin-top: 42px; border-top: 1px solid var(--detail-line); }
.solution-steps > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--detail-line); }
.solution-steps > div > span { color: #0ba0ad; font-family: Manrope, sans-serif; font-size: 12px; }
.solution-steps h3 { color: #263b42; font-size: 19px; font-weight: 400; }
.solution-steps p { margin-top: 8px; color: #708389; font-size: 14px; line-height: 1.8; }
.case-wide-visual { margin: 47px 0 0; }
.case-wide-visual img { display: block; width: 100%; height: 350px; object-fit: cover; border-radius: 16px; }
.case-wide-visual figcaption { margin-top: 13px; color: #94a4a8; font-size: 12px; line-height: 1.7; }
.result-comparison { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 46px; align-items: center; margin-top: 48px; padding: 28px; border-radius: 16px; background: linear-gradient(140deg, #f3fbfc, #f6f7ff); }
.result-summary { padding-right: 25px; border-right: 1px solid #d5e8eb; }
.result-summary span { color: #648087; font-size: 13px; }
.result-summary strong { display: block; margin-top: 17px; color: #117e9c; font-size: 34px; font-weight: 300; letter-spacing: -.04em; white-space: nowrap; }
.result-summary strong i { color: #7eabb3; font-style: normal; font-size: 22px; }
.result-summary small { display: block; margin-top: 12px; color: #8ca1a5; font-size: 11px; line-height: 1.6; }
.result-bars { display: grid; gap: 19px; }
.result-bars > div { display: grid; grid-template-columns: 106px minmax(0, 1fr) 60px; gap: 13px; align-items: center; color: #71878d; font-size: 11px; }
.result-bars > div > div { height: 17px; overflow: hidden; border-radius: 99px; background: #e5eff1; }
.result-bars i { display: block; width: var(--after); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #61cbd0 0 var(--before), #6497e6 var(--before)); }
.result-bars strong { color: #3c6670; font-size: 11px; font-weight: 500; text-align: right; }
.result-table-wrap { margin-top: 42px; overflow-x: auto; }
.result-table { width: 100%; border-collapse: collapse; color: #60767c; font-size: 13px; }
.result-table caption { margin-bottom: 14px; color: #8ba0a4; font-size: 12px; text-align: left; }
.result-table th, .result-table td { padding: 15px 13px; border-bottom: 1px solid var(--detail-line); text-align: left; white-space: nowrap; }
.result-table th { color: #8a9da1; font-size: 11px; font-weight: 400; }
.result-table td strong { color: #0b98aa; font-weight: 500; }
.case-review blockquote { max-width: 700px; margin: 42px 0 0; padding: 25px 0 25px 26px; border-left: 2px solid #62c9cb; color: #354e55; font-size: 20px; line-height: 1.8; }
.case-end-actions { display: flex; align-items: center; gap: 27px; margin-top: 44px; }
.case-back-link { color: #397b87; font-size: 14px; text-decoration: none; }
.case-back-link span { display: inline-block; margin-left: 5px; transition: transform .25s ease; }
.case-back-link:hover span, .case-back-link:focus-visible span { transform: translateX(4px); }
.case-detail-page .cases-hello { margin-top: 0; }
@media (max-width: 1000px) {
  .case-detail-hero { padding-top: 112px; }
  .case-detail-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .case-detail-cover { max-width: 720px; }
  .case-detail-cover img { height: 520px; min-height: 0; }
  .case-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-article { grid-template-columns: 155px minmax(0, 1fr); gap: 42px; }
  .case-section-index { left: -38px; }
}
@media (max-width: 760px) {
  .case-detail-hero { padding-top: 92px; padding-bottom: 70px; }
  .case-breadcrumb { font-size: 12px; }
  .case-detail-hero-grid { margin-top: 34px; gap: 38px; }
  .case-detail-hero-copy h1 { font-size: 40px; }
  .case-detail-hero-copy > p { font-size: 15px; line-height: 1.85; }
  .case-facts { gap: 16px 20px; margin-top: 36px; }
  .case-detail-cover { border-radius: 17px; }
  .case-detail-cover img { height: 310px; }
  .case-impact { padding-block: 64px 70px; }
  .case-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
  .case-impact-grid > div { padding: 17px 15px 18px; }
  .case-impact-grid strong { font-size: 34px; }
  .case-impact-grid span { margin-top: 12px; font-size: 12px; }
  .case-impact-grid small { font-size: 10px; }
  .case-article { display: block; padding-top: 72px; padding-bottom: 90px; }
  .case-toc { position: sticky; top: 62px; z-index: 4; display: flex; gap: 18px; overflow-x: auto; padding: 12px 0; margin-bottom: 62px; border-bottom: 1px solid #e7f0f2; background: #fff; white-space: nowrap; }
  .case-toc > span { flex: 0 0 auto; }
  .case-toc a { flex: 0 0 auto; padding-left: 0; font-size: 12px; }
  .case-toc a::before { display: none; }
  .case-section-index { position: static; display: block; margin-bottom: 13px; }
  .case-story-section { padding-bottom: 74px; margin-bottom: 74px; scroll-margin-top: 120px; }
  .case-section-heading h2 { font-size: 31px; }
  .case-story-section > p { font-size: 15px; line-height: 1.9; }
  .case-challenge-grid { grid-template-columns: 1fr; gap: 10px; }
  .case-challenge-grid > div { min-height: 0; }
  .research-dashboard { grid-template-columns: 1fr; }
  .research-side { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 15px; }
  .research-side div { min-height: 96px; border-right: 1px solid #edf4f5; border-bottom: 0; }
  .research-side div:last-child { border-right: 0; }
  .research-side strong { font-size: 26px; }
  .solution-steps > div { grid-template-columns: 35px minmax(0, 1fr); gap: 12px; }
  .case-wide-visual img { height: 220px; }
  .result-comparison { grid-template-columns: 1fr; gap: 29px; padding: 20px; }
  .result-summary { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid #d5e8eb; }
  .result-bars > div { grid-template-columns: 92px minmax(0, 1fr) 52px; gap: 8px; }
  .case-review blockquote { font-size: 18px; }
  .case-end-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-toc a, .case-back-link span { transition: none; }
}