/* ==========================================================================
   Case Study Detail Template (case-study.php)
   Classes prefixed `csd-` to avoid clashing with image-asset filename
   prefixes (e.g. cs-hero-*.jpg) and with global classes in style.css.
   ========================================================================== */

/* -- 404 (case study not found) ------------------------------------------ */
.csd-404-pad { padding: clamp(64px, 10vw, 120px) 20px; }
.csd-text-green { color: #0f8a4a; }
.csd-404-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* -- Hero ------------------------------------------------------------------ */
.csd-hero { background: radial-gradient(ellipse 60% 70% at 85% 30%, #e3f5ea, transparent 70%), #fbfdfc; padding: clamp(24px, 3vw, 32px) 20px clamp(40px, 5vw, 56px); }
.csd-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7570; flex-wrap: wrap; }
.csd-breadcrumb-link { color: #6b7570; }
.csd-breadcrumb-sep { font-size: 14px; }
.csd-breadcrumb-current { color: #0c1411; font-weight: 600; }
.csd-hero-grid-spacing { margin-top: clamp(24px, 3vw, 36px); }
.csd-min-w0 { min-width: 0; }
.csd-hero-company { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin: 14px 0 0; }
.csd-hero-headline { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.25; margin-top: 14px; max-width: 520px; text-wrap: balance; }
.csd-hero-intro { font-size: 15px; line-height: 1.65; color: #4d5853; margin: 14px 0 0; max-width: 520px; }
.csd-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.csd-hero-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.csd-btn-visit { flex: 1 1 170px; max-width: 210px; }
.csd-btn-discuss { flex: 1 1 220px; max-width: 280px; white-space: nowrap; }
.csd-browser-bar-label { font-size: 11px; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.csd-browser-bar-icon { font-size: 14px; color: #6b7570; }
.csd-browser-bar-host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csd-browser-media { position: relative; aspect-ratio: 16/10; }

/* -- Overview (stat grid) -------------------------------------------------- */
.csd-stat-label { font-size: 12px; color: #6b7570; }
.csd-stat-value { font-size: 15px; font-weight: 700; margin-top: 2px; }

/* -- Services --------------------------------------------------------------- */
.csd-services-section { padding-top: 0; }
.csd-services-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* -- Shared across sections ------------------------------------------------ */
.csd-title-flush { margin-top: 0; }
.csd-tinted-section { background: #f6faf8; border-top: 1px solid #e6efe9; border-bottom: 1px solid #e6efe9; }
.csd-intro-max640 { font-size: 15px; color: #4d5853; margin: 10px 0 0; max-width: 640px; }
.csd-flow-arrow { font-size: 18px; color: #9aa5a0; }
.csd-card-title-16 { font-weight: 700; font-size: 16px; }

/* -- Highlights -------------------------------------------------------------- */
.csd-highlight-card { border-radius: 16px; padding: 20px; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.csd-highlight-check { width: 24px; height: 24px; font-size: 15px; flex: 0 0 auto; }
.csd-highlight-text { font-size: 14px; line-height: 1.55; color: #2b3531; }

/* -- Challenge ---------------------------------------------------------------- */
.csd-challenge-intro { font-size: 16px; line-height: 1.7; color: #4d5853; margin: 14px 0 0; }
.csd-challenge-point { border-radius: 16px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 12px; min-width: 0; background: #fff; font-size: 15px; line-height: 1.6; color: #2b3531; }
.csd-challenge-icon { font-size: 13px; color: #dc2626; background: #fdecec; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; }

/* -- Approach ------------------------------------------------------------------ */
.csd-approach-num { border-radius: 50%; width: 44px; height: 44px; font-size: 20px; flex: 0 0 auto; }
.csd-approach-body { flex: 1; min-width: 0; }
.csd-approach-desc { font-size: 13px; color: #5b6661; line-height: 1.5; margin-top: 4px; }

/* -- Solution -------------------------------------------------------------------- */
.csd-solution-intro { font-size: 16px; line-height: 1.7; color: #4d5853; margin: 14px 0 0; max-width: 900px; }
.csd-solution-columns-spacing { margin-top: 20px; font-size: 15px; line-height: 1.7; color: #2b3531; }
.csd-solution-media { margin-top: 32px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 24px 50px rgba(12, 20, 17, .08); }

/* -- Information architecture ----------------------------------------------------- */
.csd-arch-label { font-size: 15px; color: #4d5853; margin: 10px 0 0; }
.csd-arch-flows { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.csd-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.csd-flow-step { background: #fff; border: 1px solid #e3e9e6; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #0c1411; }

/* -- Key features ------------------------------------------------------------------- */
.csd-feature-card { border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; background: #fff; }
.csd-feature-icon { width: 44px; height: 44px; font-size: 24px; border-radius: 11px; }
.csd-feature-desc { font-size: 13px; color: #4d5853; line-height: 1.55; margin-top: 6px; }

/* -- User journey --------------------------------------------------------------------- */
.csd-journey-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.csd-journey-step { background: #eaf7ef; border: 1px solid #c9ecd6; color: #0f8a4a; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 700; }

/* -- Technical implementation ------------------------------------------------------------ */
.csd-tech-list { display: flex; flex-direction: column; gap: 1px; margin-top: 20px; max-width: 760px; background: #e6efe9; border-radius: 14px; overflow: hidden; }
.csd-tech-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 18px; background: #fff; font-size: 14px; }
.csd-tech-label { font-weight: 700; color: #0c1411; }
.csd-tech-value { color: #4d5853; }

/* -- Responsive -------------------------------------------------------------------------- */
.csd-responsive-intro { font-size: 15px; line-height: 1.65; color: #4d5853; margin: 14px 0 0; }
.csd-responsive-media { position: relative; max-width: 280px; margin: 0 auto; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 24px 50px rgba(12, 20, 17, .1); }

/* -- Outcome ------------------------------------------------------------------------------- */
.csd-outcome-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; max-width: 760px; }
.csd-outcome-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: #0c1411; }
.csd-outcome-check { width: 20px; height: 20px; font-size: 13px; flex: 0 0 auto; margin-top: 2px; }

.csd-related-services-label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: #6b7570; }
.csd-related-services-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; }
.csd-related-service-link { font-size: 15px; }

/* -- Testimonial -------------------------------------------------------------------------------- */
.csd-testimonial-quote-mark { font-size: 56px; line-height: .6; color: #c9ecd6; font-weight: 800; display: block; height: 24px; }
.csd-testimonial-text { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.45; font-weight: 500; letter-spacing: -.2px; }
.csd-testimonial-name { font-weight: 700; font-size: 16px; margin-top: 16px; }
.csd-testimonial-role { font-size: 13px; color: #5b6661; margin-top: 2px; }

/* -- More case studies ----------------------------------------------------------------------------- */
.csd-more-card-body { min-width: 0; display: flex; flex-direction: column; }
.csd-more-card-title { font-weight: 800; font-size: 19px; letter-spacing: -.4px; }
.csd-more-card-excerpt { font-size: 13px; color: #4d5853; line-height: 1.5; margin-top: 6px; }
.csd-more-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.csd-more-card-link { margin-top: auto; padding-top: 14px; }
.csd-empty-state-text { font-size: 15px; color: #4d5853; margin-top: 12px; }
.csd-empty-state-link { display: inline-flex; }

/* -- CTA -------------------------------------------------------------------------------------------- */
.csd-cta-inner { max-width: 1200px; }
.csd-cta-copy { max-width: 660px; }
.csd-accent-cta { color: #2bd67b; }