/* Case study DETAIL page — new site theme (typography + colour only).
 *
 * Loaded after case-studies.css on resources/views/case-studies/show.blade.php,
 * whose body carries `case-study-page case-study-detail`. Every rule is scoped
 * to .case-study-detail (one class more specific than the rule it overrides),
 * so the case studies index — which shares case-studies.css — is unchanged.
 *
 * Nothing here changes layout, spacing or sizes: only fonts, weights,
 * letter-spacing and colours, aligned with the rest of the site
 * (Alan Sans headings, Instrument Sans body, Mona Sans labels; forest
 * #173D2C, green #527B3F, lime #9BC53D, heading ink #202A24, pale #F7FBF0).
 * The in-app dashboard mock-up (console section) keeps its client colours.
 */

/* ---------- theme tokens ---------- */

.case-study-page.case-study-detail {
    --cs-cream: #FFFFFF;
    --cs-cream-card: #F7FBF0;
    --cs-forest: #173D2C;
    --cs-forest-card: #1F4A36;
    --cs-lime: #9BC53D;
    --cs-ink: #202A24;
    --cs-sage: #527B3F;
    --cs-on-dark: #F3FBE4;
    --cs-on-dark-muted: rgba(243, 251, 228, .66);
    --cs-body-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cs-display-font: "Alan Sans", var(--cs-body-font);
    --cs-label-font: "Mona Sans", var(--cs-body-font);
}

/* ---------- headings ---------- */

.case-study-page.case-study-detail h1,
.case-study-page.case-study-detail h2,
.case-study-page.case-study-detail h3 {
    letter-spacing: -0.03em;
}

.case-study-detail .cs-hero h1,
.case-study-detail .cs-h2,
.case-study-detail #stackSection .stack-headline,
.case-study-detail .cs-cta-heading {
    font-weight: 600;
    letter-spacing: -0.035em;
}

.case-study-detail #stackSection .card-inner h3,
.case-study-detail .cs-feature-label,
.case-study-detail .cs-feature-title,
.case-study-detail .cs-client-quote,
.case-study-detail .cs-metric-value {
    font-weight: 600;
}

/* ---------- header (site header inside .cs-nav) ---------- */

.case-study-detail .cs-nav .header {
    font-family: var(--cs-label-font);
}

/* ---------- shared bits ---------- */

.case-study-detail .cs-eyebrow {
    font-family: var(--cs-label-font);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: #55724D;
}

.case-study-detail .cs-eyebrow--on-dark {
    color: var(--cs-lime);
}

/* ---------- hero ---------- */

.case-study-detail .cs-lead {
    font-family: var(--cs-body-font);
    color: #6C756D;
}

.case-study-detail .cs-meta-chip {
    border-color: #E7F0DA;
}

.case-study-detail .cs-meta-chip-label,
.case-study-detail .cs-meta-chip-value {
    font-family: var(--cs-label-font);
}

/* ---------- problem ---------- */

.case-study-detail .cs-problem-block {
    box-shadow: inset 104px 0px 0px -100px #173D2C;
}

.case-study-detail .cs-problem-block p,
.case-study-detail .cs-problem-more {
    color: #4E5A52;
}

.case-study-detail .cs-quote-label {
    font-family: var(--cs-label-font);
    font-weight: 600;
}

/* ---------- route timeline (#stackSection, dark) ---------- */

.case-study-detail #stackSection {
    --stack-bg: #173D2C;
    --stack-card: #1F4A36;
    --stack-card-active: #25553F;
    --stack-lime: #9BC53D;
    --stack-ink: #F3FBE4;
    --stack-muted: rgba(243, 251, 228, .55);
    --stack-body: #D3E3C8;
}

.case-study-detail #stackSection .stack-eyebrow,
.case-study-detail #stackSection .phase-label {
    font-family: var(--cs-label-font);
}

.case-study-detail #stackSection .timeline-line {
    background: linear-gradient(to bottom, rgba(155, 197, 61, .35), rgba(155, 197, 61, .08));
}

.case-study-detail #stackSection .dot {
    background: #2A5A3F;
    border-color: #527B3F;
}

.case-study-detail #stackSection .dot.active {
    background: var(--stack-lime);
    border-color: var(--stack-lime);
    box-shadow: 0 0 0 6px rgba(155, 197, 61, .15), 0 0 16px rgba(155, 197, 61, .55);
}

.case-study-detail #stackSection .card-inner {
    border-color: rgba(243, 251, 228, .14);
}

.case-study-detail #stackSection .card-inner p {
    font-family: var(--cs-body-font);
    font-weight: 400;
}

/* ---------- evidence wall ---------- */

.case-study-detail .cs-feature-card {
    border-color: #E7F0DA;
}

/* Numbered badge: pale green, as on the service pages. */
.case-study-detail .cs-feature-badge {
    background: #E8F3D4;
    color: #173D2C;
    font-family: var(--cs-label-font);
    font-weight: 600;
}

.case-study-detail .cs-feature-body {
    font-family: var(--cs-body-font);
    color: #4E5A52;
}

/* ---------- metrics ---------- */

.case-study-detail .cs-metric-card {
    border-color: #E7F0DA;
}

.case-study-detail .cs-metric-index,
.case-study-detail .cs-metric-caption {
    font-family: var(--cs-label-font);
}

/* ---------- client voice (dark) ---------- */

.case-study-detail .cs-client-avatar {
    border-color: rgba(243, 251, 228, .3);
    font-family: var(--cs-label-font);
    font-weight: 600;
}

.case-study-detail .cs-client-name {
    font-family: var(--cs-label-font);
    font-weight: 600;
}

/* ---------- cta ---------- */

.case-study-detail .cs-cta-eyebrow {
    font-family: var(--cs-label-font);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: #55724D;
}

.case-study-detail .cs-cta-card .btn-accent {
    font-family: var(--cs-label-font);
    font-weight: 600;
    color: #173D2C;
    background: #9BC53D;
}

/* ---------- footer (dark) ---------- */

.case-study-page.case-study-detail footer.site-footer .footer-top {
    border-bottom-color: rgba(243, 251, 228, .15);
}

.case-study-page.case-study-detail footer.site-footer {
    font-family: var(--cs-body-font);
    color: var(--cs-on-dark);
}

/* ---------- shared homepage sections (testimonials, FAQ, enquiry) ----------
   case-studies.css pads every <section> on this page 120px top/bottom; these
   sections space themselves with margins (as on the homepage), so drop it. */

.case-study-page.case-study-detail #homeTestimonialSec,
.case-study-page.case-study-detail #homeFaqSec,
.case-study-page.case-study-detail #homeGetAQuoteSec {
    padding-block: 0;
}

/* The site footer (partials/site-footer-revamp) keeps the typography it has
   on every other page: undo this page's heading font and tracking. */
.case-study-page.case-study-detail .revamp-footer {
    --cs-display-font: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.case-study-page.case-study-detail .revamp-footer h3 {
    letter-spacing: normal;
}