.case-study-page {
  --case-ink: #070914;
  --case-navy: #111529;
  --case-navy-2: #7c3aed;
  --case-panel: #111529;
  --case-lime: #a855f7;
  --case-lime-text: #7c3aed;
  --case-tint: #eef5d8;
  --case-paper: #fbfaf8;
  --case-card: #f4f7fa;
  --case-border: #e2e8ef;
  --case-text: #44515e;
  --case-muted: #6b7a89;
  background: var(--case-paper);
  color: var(--case-text);
  font-family: var(--font-body);
}
.case-study-page h1,
.case-study-page h2,
.case-study-page h3,
.case-study-page strong { font-family: var(--font-heading); }
.case-hero,
.case-detail-hero { position: relative; overflow: hidden; color: #fff; background: var(--case-ink); }
.case-hero::after,
.case-detail-hero::after { content: ""; position: absolute; inset: auto -15% -45% 35%; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247, .17), transparent 66%); pointer-events: none; }
.case-hero-pattern { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(168,85,247,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,.06) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent); }
.case-hero-inner { position: relative; z-index: 1; padding-top: clamp(130px, 15vw, 200px); padding-bottom: clamp(70px, 9vw, 120px); }
.case-hero .breadcrumb,
.case-detail-hero .breadcrumb { color: #8fa6bc; }
.case-hero .breadcrumb a,
.case-detail-hero .breadcrumb a { color: #fff; }
.case-hero-copy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: clamp(30px, 6vw, 90px); align-items: end; margin-top: clamp(36px, 6vw, 72px); }
.case-hero-copy h1 { max-width: 900px; margin: 12px 0 0; font-size: clamp(2.65rem, 6vw, 6.2rem); line-height: .96; letter-spacing: -.045em; }
.case-hero-copy h1 span { color: var(--case-lime); }
.case-hero-copy > p { max-width: 520px; margin: 0 0 6px; color: #b8c7d4; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; }
.case-hero .eyebrow,
.case-detail-hero .eyebrow,
.case-story .eyebrow,
.case-results .eyebrow,
.case-learnings .eyebrow,
.case-related .eyebrow { font-family: var(--font-body); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.case-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(46px, 7vw, 82px); border-top: 1px solid #1e3446; border-bottom: 1px solid #1e3446; }
.case-hero-facts span { display: grid; gap: 2px; padding: 22px 24px; color: #8fa6bc; }
.case-hero-facts span + span { border-left: 1px solid #1e3446; }
.case-hero-facts strong { color: #fff; font-size: 1.25rem; }

.case-filter { padding: clamp(22px, 4vw, 38px); margin-bottom: clamp(36px, 6vw, 70px); border: 1px solid var(--case-border); border-radius: 22px; background: #fff; box-shadow: 0 20px 55px rgba(17,21,41, .07); }
.case-filter label { display: block; margin-bottom: 7px; color: var(--case-navy); font-size: .84rem; font-weight: 700; }
.case-filter-search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.case-filter input,
.case-filter select { width: 100%; min-height: 50px; border: 1px solid var(--case-border); background: #fff; color: var(--case-text); font: inherit; }
.case-filter input { padding: 0 16px; border-radius: 10px 0 0 10px; }
.case-filter-search button { min-height: 50px; padding: 0 20px; border: 0; border-radius: 0 10px 10px 0; background: var(--case-navy); color: #fff; font: 700 1rem var(--font-body); cursor: pointer; }
.case-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.case-filter select { padding: 0 12px; border-radius: 10px; }
.case-filter-actions { display: flex; gap: 18px; align-items: center; margin-top: 20px; }
.case-filter-actions > a { color: var(--case-navy); font-weight: 700; }
.case-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.case-card { overflow: hidden; border: 1px solid var(--case-border); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(17,21,41, .06); transition: transform .25s ease, box-shadow .25s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 26px 65px rgba(17,21,41, .12); }
.case-card-media { display: block; min-height: 265px; background: var(--case-navy); }
.case-card-media img { display: block; width: 100%; height: 100%; min-height: 265px; aspect-ratio: 16 / 9; object-fit: cover; }
.case-card-media > span { display: grid; place-items: center; position: relative; height: 100%; min-height: 265px; overflow: hidden; }
.case-card-media i { position: absolute; width: 220px; height: 220px; border: 1px solid rgba(168,85,247, .4); border-radius: 50%; box-shadow: 0 0 0 45px rgba(168,85,247,.05), 0 0 0 90px rgba(168,85,247,.03); }
.case-card-media strong { position: relative; color: #fff; font-size: 3rem; }
.case-card-body { padding: clamp(22px, 4vw, 38px); }
.case-card-classification { display: flex; flex-wrap: wrap; gap: 8px; }
.case-card-classification span,
.case-detail-tags span { padding: 6px 10px; border-radius: 999px; background: var(--case-tint); color: #d9b8fb; font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.case-client-label { margin: 18px 0 5px; color: var(--case-muted); font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.case-card h2 { margin: 0; color: var(--case-navy); font-size: clamp(1.55rem, 2.5vw, 2.25rem); line-height: 1.15; }
.case-card h2 a { color: inherit; }
.case-card-summary { margin: 15px 0 0; color: var(--case-text); line-height: 1.65; }
.case-card-result { display: flex; gap: 12px; padding: 15px; margin-top: 20px; border-left: 3px solid var(--case-lime); background: var(--case-tint); }
.case-card-result > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--case-lime); color: var(--case-ink); font-weight: 800; }
.case-card-result strong,
.case-card-result p { display: block; margin: 0; }
.case-card-result strong { color: var(--case-navy); font-size: .86rem; }
.case-card-result p { margin-top: 3px; font-size: .9rem; line-height: 1.5; }
.case-read-link { display: inline-flex; gap: 8px; margin-top: 22px; color: var(--case-navy); font-weight: 700; }
.case-pagination { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 48px; }
.case-pagination span { color: #98a3ad; }
.case-empty { padding: clamp(55px, 9vw, 100px) 24px; border: 1px dashed #cdd7df; border-radius: 24px; text-align: center; }
.case-empty > span { color: var(--case-lime-text); font-size: 2rem; }
.case-empty h2 { margin: 12px 0; color: var(--case-navy); }

.case-detail-head { position: relative; z-index: 1; padding-top: clamp(128px, 14vw, 190px); padding-bottom: clamp(70px, 9vw, 120px); }
.case-detail-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(32px, 5vw, 58px); }
.case-detail-tags .is-verified { background: var(--case-lime); color: var(--case-ink); }
.case-detail-head h1 { max-width: 1050px; margin: 18px 0; font-size: clamp(2.7rem, 6vw, 6.4rem); line-height: .98; letter-spacing: -.04em; }
.case-detail-lead { max-width: 760px; color: #b8c7d4; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.65; }
.case-detail-client { display: grid; max-width: 410px; padding: 18px 20px; margin-top: 34px; border-left: 3px solid var(--case-lime); background: rgba(17,21,41,.75); }
.case-detail-client span,
.case-detail-client small { color: #8fa6bc; }
.case-detail-client strong { margin: 4px 0; color: #fff; font-size: 1.2rem; }
.case-detail-image { position: relative; z-index: 2; margin-top: -45px; }
.case-detail-image img { display: block; width: 100%; max-height: 720px; object-fit: cover; border: 8px solid var(--case-paper); border-radius: 26px; box-shadow: 0 26px 70px rgba(5, 12, 20, .18); }
.case-story-shell { display: grid; gap: clamp(60px, 10vw, 125px); }
.case-story-section { display: grid; grid-template-columns: 100px minmax(0, 760px); gap: clamp(22px, 5vw, 70px); align-items: start; }
.case-story-section.is-offset { justify-content: end; }
.case-story-index { padding-top: 3px; color: var(--case-lime-text); font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 700; opacity: .45; }
.case-story-copy h2 { margin: 10px 0 20px; color: var(--case-navy); font-size: clamp(2rem, 4vw, 4rem); line-height: 1.03; }
.case-rich-copy { color: var(--case-text); font-size: 1.06rem; line-height: 1.8; }
.case-rich-copy > :first-child { margin-top: 0; }
.case-rich-copy > :last-child { margin-bottom: 0; }
.case-rich-copy h2,
.case-rich-copy h3 { color: var(--case-navy); line-height: 1.2; }
.case-rich-copy a { color: var(--case-navy-2); text-decoration: underline; text-underline-offset: 3px; }
.case-rich-copy table { width: 100%; border-collapse: collapse; }
.case-rich-copy th,
.case-rich-copy td { padding: 10px; border: 1px solid var(--case-border); text-align: left; }
.case-results { color: #fff; background: var(--case-navy); }
.case-results-shell { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(35px, 7vw, 100px); }
.case-results-heading h2 { margin: 12px 0; font-size: clamp(2.5rem, 5vw, 5rem); }
.case-results-heading > p { color: #b8c7d4; line-height: 1.65; }
.case-results .case-rich-copy { color: #fff; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.case-results .case-rich-copy h2,
.case-results .case-rich-copy h3,
.case-results .case-rich-copy a { color: #fff; }
.case-evidence-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid #496278; }
.case-evidence-details > div { padding: 22px; }
.case-evidence-details > div + div { border-left: 1px solid #496278; }
.case-evidence-details dt { color: var(--case-lime); font-weight: 700; }
.case-evidence-details dd { margin: 8px 0 0; color: #d8e2ea; line-height: 1.55; overflow-wrap: anywhere; }
.case-learnings { background: var(--case-tint); }
.case-learnings-shell { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: clamp(35px, 7vw, 100px); }
.case-learnings h2 { margin: 10px 0 0; color: var(--case-navy); font-size: clamp(2.4rem, 5vw, 4.8rem); }
.case-context-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.case-context-card { padding: 22px; border: 1px solid var(--case-border); border-radius: 18px; background: #fff; }
.case-context-card > span { color: var(--case-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.case-context-card > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.case-context-card a { padding: 6px 9px; border-radius: 8px; background: var(--case-card); color: var(--case-navy); font-weight: 700; }
.case-related { border-top: 1px solid var(--case-border); }
.case-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.case-related-grid > a { position: relative; min-height: 260px; padding: 28px; border-radius: 20px; background: var(--case-navy); color: #fff; }
.case-related-grid > a > span { color: var(--case-lime); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.case-related-grid h3 { margin: 18px 0 10px; font-size: 1.6rem; }
.case-related-grid p { color: #b8c7d4; line-height: 1.55; }
.case-related-grid i { position: absolute; right: 24px; bottom: 22px; color: var(--case-lime); font-size: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .case-card { transition: none; }
}
@media (max-width: 900px) {
  .case-hero-copy,
  .case-results-shell,
  .case-learnings-shell { grid-template-columns: 1fr; }
  .case-filter-grid,
  .case-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card-grid { grid-template-columns: 1fr; }
  .case-related-grid { grid-template-columns: 1fr; }
  .case-evidence-details { grid-template-columns: 1fr; }
  .case-evidence-details > div + div { border-left: 0; border-top: 1px solid #496278; }
}
@media (max-width: 620px) {
  .case-hero-facts,
  .case-filter-grid,
  .case-context-grid { grid-template-columns: 1fr; }
  .case-hero-facts span + span { border-left: 0; border-top: 1px solid #1e3446; }
  .case-filter-search > div { grid-template-columns: 1fr; gap: 8px; }
  .case-filter input,
  .case-filter-search button { border-radius: 10px; }
  .case-filter-actions { flex-wrap: wrap; }
  .case-story-section { grid-template-columns: 1fr; gap: 6px; }
  .case-story-index { font-size: 2.4rem; }
  .case-detail-image { margin-top: -25px; }
  .case-detail-image img { border-width: 4px; border-radius: 18px; }
}