/* Evolve Self-Serve Cancellations Case Study Styles */

 /* Mirror evolve-inbox layout and responsiveness */
 .case-hero { padding: 120px 20px 80px; min-height: 100vh; background: var(--color-white); display: grid; place-items: center; }
 .case-hero .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-20); align-items: center; }
 .case-hero .hero-content { grid-column: span 7; padding: 0; max-width: 870px; text-align: left; }
 .case-hero .hero-media { grid-column: span 5 / -1; display: flex; justify-content: center; align-items: center; }
 .hero-placeholder { width: 100%; height: 420px; background: var(--color-white); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
 .hero-placeholder img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: inherit; }
 .launch-badge { display: inline-block; background: var(--color-off-black); color: var(--color-white); padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--space-24); }

 .case-overview { background: var(--color-fire-50); padding: var(--space-64) 0; }
 .case-overview .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-64); align-items: start; }
 .case-content { grid-column: span 6; }
 .case-details { grid-column: span 5 / -1; margin-top: 48px; }
 .case-content h3 { margin: 0 0 var(--space-8); }
 .case-content .content-section { margin-bottom: var(--space-32); }
 .case-details h4 { margin: 0 0 var(--space-2); }
 .case-details p { margin: 0 0 var(--space-24); }
 .case-details ul { list-style: none; padding: 0; margin: 0 0 var(--space-20); }
 .case-details li { margin-bottom: var(--space-8); padding-left: var(--space-16); position: relative; }
 .case-details li:before { content: "•"; position: absolute; left: 0; color: var(--text-body); }

 @media (max-width: 1024px) {
     .case-hero .container { grid-template-columns: 1fr; align-items: start; }
     .case-hero .container { margin: 0 var(--space-40); }
     .case-hero .hero-media { grid-column: 1 / -1; order: 1; }
     .case-hero .hero-content { grid-column: 1 / -1; order: 2; max-width: 100%; padding: 0; }
     .case-overview .container { grid-template-columns: 1fr; gap: var(--space-48); margin: 0 var(--space-40); }
     .case-content { order: 1; }
     .case-details { order: 2; margin-top: 0; }
 }
 @media (max-width: 640px) {
     .case-hero .container, .case-overview .container { margin: 0 var(--space-40); }
 }

 .case-metrics .testing .solution{ padding: var(--space-64) 0; background: var(--color-white); }
 .case-metrics { padding: var(--space-64) 0; background: var(--color-white); }
 .case-metrics .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-64); align-items: start; }
 .case-metrics h3 { margin: 0 0 var(--space-20); }
 .metrics-left { grid-column: span 6; }
 .metrics-right { grid-column: span 5 / -1; }
 .metrics-left p { margin: 0 0 var(--space-12); }
 .metrics-list { display: grid; gap: var(--space-24); }
 .metrics-item h2 { color: var(--text-accent); margin: 0 0 var(--space-0); }
 .metrics-item p { margin: 0; }
 .metrics-left ul { list-style: none; padding-left: 0; margin: 0 0 var(--space-20); }
 .metrics-left li { display: block; position: relative; padding-left: var(--space-20); margin: 0 0 var(--space-8); }
 .metrics-left li::before { content: "•"; position: absolute; left: 0; top: 0.2em; color: var(--text-body); }
 .metrics-right { margin-top: 54px; }
 @media (max-width: 1024px) {
     .case-metrics .container { grid-template-columns: 1fr; gap: var(--space-40); margin: 0 var(--space-40); }
     .metrics-left, .metrics-right { grid-column: 1 / -1; }
 }

 .discovery-media { padding: var(--space-64) 0; background: var(--color-white); }
 .discovery-media .container { max-width: 1920px; margin: 0 80px; }
 .carousel { position: relative; overflow: hidden; }
 .carousel-track { display: flex; gap: 0; scroll-snap-type: x mandatory; overflow-x: auto; padding-bottom: var(--space-12); scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
 .carousel-track::-webkit-scrollbar { display: none; }
 .carousel-slide { min-width: 100%; scroll-snap-align: start; }
 .carousel-caption { text-align: center; color: var(--color-grey); margin: 0 0 var(--space-12); }
 .carousel-media { width: 100%; height: 680px; background: var(--color-white); border-radius: 16px; display: grid; place-items: center; overflow: hidden; position: relative; }
 .carousel-media img { height: 680px; width: auto; max-width: 100%; display: block; border-radius: 16px; object-fit: contain; }
 .carousel-nav { position: absolute; top: calc(50% + var(--space-12)); left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; pointer-events: none; padding: 0 var(--space-20); }
 .carousel-btn { pointer-events: all; background: transparent; color: var(--color-fire-500); border: 0; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; font-size: 48px; line-height: 1; }
 @media (max-width: 640px) { .carousel-btn { font-size: 36px; width: 36px; height: 36px; } }
 @media (max-width: 1024px) { .discovery-media .container { margin: 0 var(--space-40); } }
 @media (max-width: 640px) { .discovery-media .container { margin: 0 var(--space-40); } }

 .metrics-images,.discovery-images, .solution-images{ padding: var(--space-48) 0 var(--space-64); background: var(--color-white); }
 .metrics-images .container, .discovery-images .container, .solution-images .container { max-width: 1920px; margin: 0 80px; }
 @media (max-width: 1024px) { .metrics-images .container, .discovery-images .container, .solution-images .container { margin: 0 var(--space-40); } }
 @media (max-width: 640px) { .metrics-images .container, .discovery-images .container, .solution-images .container { margin: 0 var(--space-40); } }
 .metrics-image, .discovery-image, .solution-image{ margin: 0 0 var(--space-48); }
 .metrics-caption, .discovery-caption, .solution-caption{ text-align: center; color: var(--color-grey); margin: 0 0 var(--space-12); }
 .metrics-placeholder, .discovery-placeholder, .solution-placeholder{ width: 100%; background: var(--color-grey); border-radius: 16px; }
 .metrics-placeholder, .discovery-placeholder, .solution-placeholder { height: auto; background: transparent; }
 .metrics-placeholder img, .discovery-placeholder img, .solution-placeholder img { width: 100%; height: auto; object-fit: contain; border-radius: 16px; display: block; }

 /* Video section */
 .video-wrapper { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: var(--color-off-black); border: 1px solid var(--color-grey); }
 .video-wrapper video { width: 100%; height: auto; display: block; border-radius: 16px; }
 .video-overlay { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
 .video-overlay.is-visible { opacity: 1; pointer-events: all; }
 .video-play-btn { background: var(--color-fire-500); color: var(--color-white); border: none; padding: var(--space-12) var(--space-20); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: pointer; }

 /* Centered video container */
 .video-centered { width: 75%; margin: 0 auto; }
 @media (max-width: 1024px) { .video-centered { width: 100%; } }

 /* Device frame wrapper to scale video to 50% on desktop */
 .device-frame { width: 50%; margin: 0 auto; background: #000; border-radius: 32px; padding: var(--space-12); border: 8px solid #111; box-shadow: var(--shadow-sm); }
 .device-notch { width: 96px; height: 8px; background: #222; border-radius: 8px; margin: 0 auto var(--space-8); }
 @media (max-width: 1024px) { .device-frame { width: 100%; } }

 /* MacBook Air SVG device with video placed in the screen area */
 .device-mac { position: relative; width: 50%; margin: 0 auto; }
 .device-mac .frame { width: 100%; height: auto; display: block; }
 .device-mac .screen { position: absolute; top: 5.3%; left: 12.3%; width: 75.5%; height: 76.7%; }
 .device-mac .screen .video-wrapper { height: 100%; }
 .device-mac .screen video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
 @media (max-width: 1024px) { .device-mac { width: 100%; } }

 .case-quote { min-height: 100vh; background: var(--color-white); display: grid; place-items: center; padding: var(--space-64) 0; }
 .case-quote .container { max-width: 1920px; margin: 0 80px; }
 .case-quote .quote-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
 .case-quote .quote-kicker { margin: 0 0 var(--space-16); color: var(--color-grey); }
 .case-quote .quote-text { color: var(--color-fire-500); }
 @media (max-width: 640px) { .case-quote .container { margin: 0 var(--space-40); } }

 .solution-section .metrics-right ul { list-style: none; padding: 0; margin: 0 0 var(--space-8); }
 .solution-section .metrics-right li { margin-bottom: var(--space-8); padding-left: var(--space-16); position: relative; }
 .solution-section .metrics-right li:before { content: "•"; position: absolute; left: 0; color: var(--text-body); }

 .design-section { padding: var(--space-64) 0; background: var(--color-white); }
 .design-section .container { max-width: 1920px; margin: 0 80px; }
 .design-section h3 { margin: 0 0 var(--space-32); }
 .design-placeholder { width: 100%; height: 520px; background: var(--color-fire-50); border-radius: 16px; }
 .design-stack { display: grid; gap: var(--space-24); }
 .design-cta { display: flex; justify-content: center; margin-top: var(--space-24); gap: var(--space-24); }
 .design-cta .cta-button { background: var(--color-fire-500); color: var(--color-white); border: none; padding: var(--space-12) var(--space-20); border-radius: var(--radius-sm); text-decoration: none; box-shadow: var(--shadow-sm); display: inline-block; }
 .design-cta .cta-button:hover { background: var(--text-accent); text-decoration: none; }
 .design-cta .cta-button:active { background: var(--text-accent); }
 @media (max-width: 1024px) { .design-cta { flex-direction: column; align-items: center; } }
 @media (max-width: 640px) { .design-cta .cta-button { display: block; width: 100%; text-align: center; } }
 @media (max-width: 1024px) { .design-section .container { margin: 0 var(--space-40); } }

 /* Standalone CTA button (not wrapped in .design-cta) */
 .cta-button { background: var(--color-fire-500); color: var(--color-white); border: none; padding: var(--space-12) var(--space-20); border-radius: var(--radius-sm); text-decoration: none; box-shadow: var(--shadow-sm); display: inline-block; }
 .cta-button:hover { background: var(--text-accent); text-decoration: none; }
 .cta-button:active { background: var(--text-accent); }
 /* Center the button within section containers on desktop */
 .solution-images .container > .cta-button { display: block; width: fit-content; margin: var(--space-24) auto 0; }
 /* Full-width button within gutters on tablet/mobile */
 @media (max-width: 1024px) { .solution-images .container > .cta-button { display: block; width: 100%; text-align: center; } }
 @media (max-width: 640px) { .solution-images .container > .cta-button { display: block; width: 100%; text-align: center; } }

 .impact-stats { padding: var(--space-0) 0; background: var(--color-white); }
 .impact-stats .container { max-width: 1920px; margin: 0 80px; }
 .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-54); }
 .stats-item h2 { color: var(--text-accent); margin: 0 0 var(--space-0); }
 .stats-item p { margin: 0; }
 @media (max-width: 1024px) { .impact-stats .container { margin: 0 var(--space-40); }.stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-40); } }
 @media (max-width: 640px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); } }

 .impact-intro { padding-bottom: var(--space-40); }
 .impact-next { padding-top: var(--space-40); }

 .project-nav { padding: calc(var(--space-64) * 2) 0; background: var(--color-fire-50); }
 .project-nav .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-64); align-items: end; }
 .project-nav .nav-left { grid-column: span 6; }
 .project-nav .nav-right { grid-column: span 5 / -1; display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--space-4); }
 .prev-project-label, .next-project-label { color: var(--text-body); display: block; margin-bottom: var(--space-8); }
 .prev-project-link, .next-project-link { max-width: 400px; display: block; text-decoration: none; text-decoration-color: #232323; text-decoration-thickness: 2px; }
 .prev-project-link { text-align: left; }
 .next-project-link { text-align: right; }
 .nav-next { text-align: right; }
 .prev-project-link:hover, .next-project-link:hover { text-decoration: underline; text-underline-offset: 25%; text-decoration-thickness: 17%; }
 @media (max-width: 1024px) {
     .project-nav .container { grid-template-columns: 1fr; gap: var(--space-40); margin: 0 var(--space-40); }
     .project-nav .nav-right { justify-content: flex-start; }
     .nav-next { text-align: left; }
     .next-project-link { text-align: left; }
 }