/* ═══════════════════════════════════════════════════════════
   case_study.css — Premium Operational Proof Page
   Theme: navy / blue / white — no lime green
   ═══════════════════════════════════════════════════════════ */

.case-study-page { background: #ffffff; }

/* ── Shared utilities ─────────────────────────────────────── */
.cs-detail-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    line-height: 1;
}

.cs-detail-eyebrow-light {
    color: var(--blue-soft, #5b9cff);
}

.cs-detail-section-label {
    display: block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Buttons ──────────────────────────────────────────────── */
.cs-detail-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    background: #ffffff;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

.cs-detail-btn-primary:hover {
    background: #eef3ff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.cs-detail-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    background: transparent;
    color: rgba(255,255,255,.80);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.cs-detail-btn-ghost:hover {
    border-color: rgba(255,255,255,.50);
    background: rgba(255,255,255,.08);
    color: #ffffff;
}

/* ══════════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════════ */
.cs-detail-hero {
    position: relative;
    padding: 108px 0 96px;
    overflow: hidden;
}

.cs-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 60% at 80% 42%, rgba(47,128,237,.12), transparent),
        radial-gradient(ellipse 40% 50% at 4% 18%, rgba(47,128,237,.07), transparent),
        linear-gradient(135deg, var(--navy) 0%, #0d1a40 60%, #111f5e 100%);
}

.cs-detail-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .62fr);
    gap: 56px;
    align-items: center;
}

.cs-detail-hero .cs-detail-eyebrow {
    color: var(--blue-soft, #5b9cff);
}

.cs-detail-hero-copy h1 {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: clamp(2.6rem, 4vw, 4.6rem);
    line-height: .96;
    letter-spacing: -.065em;
    font-weight: 950;
    text-wrap: balance;
}

.cs-detail-hero-copy > p {
    margin: 0 0 32px;
    max-width: 580px;
    color: rgba(255,255,255,.65);
    font-size: clamp(1.05rem, 1.28vw, 1.26rem);
    line-height: 1.65;
}

.cs-detail-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cs-detail-disclaimer {
    margin: 0;
    color: rgba(255,255,255,.34);
    font-size: 11.5px;
    line-height: 1.5;
}

/* Hero image figure */
.cs-detail-hero-fig {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #1e2e42, #2a3e56);
    box-shadow: 0 32px 80px rgba(0,0,0,.28);
}

.cs-detail-hero-fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,7,51,.06) 0%, rgba(2,7,51,.30) 60%, rgba(2,7,51,.62) 100%);
}

/* Proof stat strip below image */
.cs-detail-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
}

.cs-detail-hero-proof-item {
    padding: 16px 18px;
    border-right: 1px solid rgba(255,255,255,.09);
}

.cs-detail-hero-proof-item:last-child {
    border-right: none;
}

.cs-detail-hero-proof-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--blue-soft, #5b9cff);
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.04em;
}

.cs-detail-hero-proof-item span {
    display: block;
    color: rgba(255,255,255,.50);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 980px) {
    .cs-detail-hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 640px) {
    .cs-detail-hero {
        padding: 80px 0 72px;
    }
}

/* ══════════════════════════════════════════════════════════
   2. BODY: Executive Summary + Sidebar
   ══════════════════════════════════════════════════════════ */
.cs-detail-body {
    padding: 96px 0 104px;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.cs-detail-body-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 80px;
    align-items: start;
}

/* Content blocks */
.cs-detail-block {
    padding-bottom: 52px;
    margin-bottom: 52px;
    border-bottom: 1px solid var(--line);
}

.cs-detail-block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.cs-detail-block > p {
    margin: 14px 0 0;
    color: #4f5c70;
    font-size: 17.5px;
    line-height: 1.72;
    font-weight: 450;
    max-width: 70ch;
}

.cs-detail-block > p + p {
    margin-top: 16px;
}

.cs-detail-block h2 {
    margin: 0 0 18px;
    color: var(--navy-2);
    font-size: clamp(1.7rem, 2.4vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 950;
}

/* Challenge bullet list */
.cs-detail-challenge-list {
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-detail-challenge-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 2px solid var(--blue);
    border-radius: 0 10px 10px 0;
    background: var(--bg, #f6f8fb);
    color: #4f5c70;
    font-size: 15.5px;
    font-weight: 550;
    line-height: 1.5;
}

.cs-detail-challenge-list li::before {
    content: "→";
    flex-shrink: 0;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

/* Pull quote / callout */
.cs-detail-callout {
    margin: 0;
    padding: 18px 22px;
    border-left: 3px solid var(--blue);
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, rgba(47,128,237,.06), transparent 70%);
    color: var(--navy-2);
    font-size: 16.5px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.55;
}

/* Solution step list */
.cs-detail-steps {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.cs-detail-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

.cs-detail-step-num {
    padding-top: 3px;
    color: var(--blue);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
}

.cs-detail-step-body h3 {
    margin: 0 0 7px;
    color: var(--navy-2);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.cs-detail-step-body p {
    margin: 0;
    color: #566276;
    font-size: 15px;
    line-height: 1.65;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.cs-detail-sidebar {
    position: sticky;
    top: calc(var(--header-height, 88px) + 32px);
    height: fit-content;
}

.cs-detail-sidebar-card {
    padding: 30px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    border-radius: 0 0 16px 16px;
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(15,27,45,.06);
}

.cs-detail-sidebar-title {
    margin: 0 0 22px;
    color: var(--navy-2);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}

.cs-detail-sidebar-dl {
    margin: 0;
}

.cs-detail-sidebar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.cs-detail-sidebar-row:first-child {
    padding-top: 0;
}

.cs-detail-sidebar-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cs-detail-sidebar-row dt {
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    line-height: 1;
}

.cs-detail-sidebar-row dd {
    margin: 0;
    color: var(--navy-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.cs-detail-sidebar-cta {
    display: block;
    margin-top: 22px;
    padding: 13px 18px;
    background: var(--navy);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    transition: background .2s ease, transform .2s ease;
}

.cs-detail-sidebar-cta:hover {
    background: var(--navy-2);
    transform: translateY(-1px);
}

@media (max-width: 980px) {
    .cs-detail-body-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .cs-detail-sidebar {
        position: relative;
        top: auto;
        max-width: 480px;
    }
}

@media (max-width: 640px) {
    .cs-detail-body {
        padding: 72px 0 80px;
    }

    .cs-detail-block {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .cs-detail-sidebar {
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════
   3. RESULTS & OUTCOMES
   ══════════════════════════════════════════════════════════ */
.cs-detail-results {
    position: relative;
    padding: 96px 0 104px;
    overflow: hidden;
}

.cs-detail-results::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 70% at 6% 30%, rgba(47,128,237,.10), transparent),
        radial-gradient(ellipse 40% 55% at 88% 64%, rgba(47,128,237,.06), transparent),
        linear-gradient(145deg, var(--navy) 0%, #091640 100%);
}

.cs-detail-results-header {
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
}

.cs-detail-results-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 3.2vw, 3.6rem);
    line-height: .97;
    letter-spacing: -.065em;
    font-weight: 950;
}

.cs-detail-results-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: stretch;
    padding: 48px 52px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    background: rgba(255,255,255,.03);
}

.cs-detail-result-divider {
    width: 1px;
    background: rgba(255,255,255,.10);
    margin: 4px 0;
}

.cs-detail-result-tile {
    display: flex;
    flex-direction: column;
    padding: 0 40px;
}

.cs-detail-result-tile:first-child { padding-left: 0; }
.cs-detail-result-tile:last-child  { padding-right: 0; }

.cs-detail-result-val {
    display: block;
    color: var(--blue-soft, #5b9cff);
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.055em;
    margin-bottom: 10px;
}

.cs-detail-result-label {
    display: block;
    color: rgba(255,255,255,.50);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.cs-detail-results-note {
    position: relative;
    z-index: 1;
    margin: 48px auto 0;
    max-width: 680px;
    color: rgba(255,255,255,.40);
    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    text-align: center;
}

@media (max-width: 1040px) {
    .cs-detail-results-grid {
        grid-template-columns: 1fr 1fr;
        padding: 40px;
        gap: 32px;
    }

    .cs-detail-result-divider { display: none; }
    .cs-detail-result-tile { padding: 0; }
}

@media (max-width: 640px) {
    .cs-detail-results {
        padding: 72px 0 80px;
    }

    .cs-detail-results-header {
        margin-bottom: 44px;
    }

    .cs-detail-results-grid {
        grid-template-columns: 1fr 1fr;
        padding: 28px 22px;
        border-radius: 18px;
        gap: 24px;
    }
}

/* ══════════════════════════════════════════════════════════
   4. CLIENT TESTIMONIAL
   ══════════════════════════════════════════════════════════ */
.cs-detail-testimonial {
    padding: 96px 0 104px;
    background: var(--bg, #f6f8fb);
    border-bottom: 1px solid var(--line);
}

.cs-detail-quote-card {
    position: relative;
    margin: 0;
    max-width: 860px;
    padding: 52px 56px 48px;
    border-radius: 24px;
    background: var(--navy);
    overflow: hidden;
}

.cs-detail-quote-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(47,128,237,.14), transparent),
        radial-gradient(ellipse 40% 40% at 5% 90%, rgba(47,128,237,.07), transparent);
}

.cs-detail-quote-card::after {
    content: '\201C';
    position: absolute;
    top: 20px;
    left: 44px;
    color: rgba(91,156,255,.22);
    font-size: 120px;
    font-weight: 950;
    line-height: .7;
    font-family: Georgia, serif;
    pointer-events: none;
}

.cs-detail-quote-text {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.02em;
    font-style: italic;
    padding-top: 28px;
}

.cs-detail-quote-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.cs-detail-quote-author {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.cs-detail-quote-company {
    color: rgba(255,255,255,.48);
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 640px) {
    .cs-detail-testimonial {
        padding: 64px 0 72px;
    }

    .cs-detail-quote-card {
        padding: 36px 28px 32px;
        border-radius: 18px;
    }

    .cs-detail-quote-card::after {
        font-size: 80px;
        left: 24px;
    }
}

/* ══════════════════════════════════════════════════════════
   5. FINAL CTA
   ══════════════════════════════════════════════════════════ */
.cs-detail-cta {
    position: relative;
    padding: 96px 0 104px;
    overflow: hidden;
}

.cs-detail-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 0% 30%, rgba(47,128,237,.09), transparent),
        radial-gradient(ellipse 40% 50% at 100% 70%, rgba(47,128,237,.06), transparent),
        linear-gradient(140deg, var(--navy) 0%, #0d1a40 100%);
}

.cs-detail-cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 56px;
    align-items: center;
}

.cs-detail-cta .cs-detail-eyebrow {
    color: var(--blue-soft, #5b9cff);
}

.cs-detail-cta-copy h2 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    line-height: .97;
    letter-spacing: -.065em;
    font-weight: 950;
}

.cs-detail-cta-copy p {
    margin: 0;
    max-width: 580px;
    color: rgba(255,255,255,.58);
    font-size: 17px;
    line-height: 1.65;
}

.cs-detail-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .cs-detail-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cs-detail-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .cs-detail-cta {
        padding: 64px 0 72px;
    }

    .cs-detail-cta-actions {
        flex-direction: column;
    }

    .cs-detail-cta-actions .cs-detail-btn-primary,
    .cs-detail-cta-actions .cs-detail-btn-ghost {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Theme alignment: Case Studies hub (charcoal/green/white)
   ═══════════════════════════════════════════════════════════ */

:root {
    --csd-green:       #9bdc28;
    --csd-green-deep:  #6fa814;
    --csd-green-soft:  rgba(155,220,40,.12);
    --csd-charcoal:    #0d1a2b;
    --csd-charcoal-2:  #172033;
    --csd-charcoal-3:  #1a2638;
}

/* ── Shared labels/eyebrows ──────────────────────────────────── */
.cs-detail-eyebrow {
    color: var(--csd-green-deep);
}

.cs-detail-eyebrow-light {
    color: rgba(155,220,40,.80);
}

.cs-detail-section-label {
    color: var(--csd-green-deep);
}

/* ── Hero ────────────────────────────────────────────────────── */
.cs-detail-hero::before {
    background:
        radial-gradient(ellipse 55% 65% at 6% 30%, rgba(155,220,40,.06), transparent),
        radial-gradient(ellipse 60% 55% at 82% 44%, rgba(65,118,231,.09), transparent),
        linear-gradient(145deg, #0d1a2b 0%, #172033 55%, #1a2638 100%);
}

.cs-detail-hero .cs-detail-eyebrow {
    color: rgba(155,220,40,.85);
}

.cs-detail-hero-proof-item strong {
    color: var(--csd-green);
}

/* Primary button — green on dark */
.cs-detail-btn-primary {
    background: var(--csd-green);
    color: var(--csd-charcoal);
    box-shadow: 0 4px 18px rgba(155,220,40,.28);
}

.cs-detail-btn-primary:hover {
    background: #aae832;
    box-shadow: 0 10px 30px rgba(155,220,40,.36);
}

/* ── Body content ────────────────────────────────────────────── */
.cs-detail-challenge-list li {
    border-left-color: var(--csd-green-deep);
}

.cs-detail-challenge-list li::before {
    color: var(--csd-green-deep);
}

.cs-detail-callout {
    border-left-color: var(--csd-green-deep);
    background: linear-gradient(90deg, rgba(155,220,40,.07), transparent 70%);
}

.cs-detail-step-num {
    color: var(--csd-green-deep);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.cs-detail-sidebar-card {
    border-top-color: var(--csd-green-deep);
}

.cs-detail-sidebar-row dt {
    color: var(--csd-green-deep);
}

.cs-detail-sidebar-cta {
    background: var(--csd-charcoal);
}

.cs-detail-sidebar-cta:hover {
    background: var(--csd-charcoal-2);
}

/* ── Results band ────────────────────────────────────────────── */
.cs-detail-results::before {
    background:
        radial-gradient(ellipse 55% 70% at 6% 30%, rgba(155,220,40,.06), transparent),
        radial-gradient(ellipse 40% 55% at 88% 64%, rgba(65,118,231,.05), transparent),
        linear-gradient(160deg, #0d1a2b 0%, #172033 60%, #1a2638 100%);
}

.cs-detail-result-val {
    color: var(--csd-green);
}

/* ── Testimonial quote card ──────────────────────────────────── */
.cs-detail-quote-card {
    background: linear-gradient(145deg, #0d1a2b 0%, #172033 100%);
}

.cs-detail-quote-card::before {
    background:
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(155,220,40,.07), transparent),
        radial-gradient(ellipse 40% 40% at 5% 90%, rgba(155,220,40,.04), transparent);
}

.cs-detail-quote-card::after {
    color: rgba(155,220,40,.18);
}

/* ── Final CTA ───────────────────────────────────────────────── */
.cs-detail-cta::before {
    background:
        radial-gradient(ellipse 50% 60% at 8% 40%, rgba(155,220,40,.05), transparent),
        radial-gradient(ellipse 45% 55% at 88% 60%, rgba(65,118,231,.08), transparent),
        linear-gradient(160deg, #0d1a2b 0%, #172033 55%, #1a2638 100%);
}

/* CTA exit fade — matches where the gradient ends */
.cs-detail-cta::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 96px;
    background: linear-gradient(to bottom, transparent, #1a2638);
    pointer-events: none;
    z-index: 0;
}

/* Scoped footer — mirrors case-studies hub treatment */
.case-study-page > footer {
    background:
        radial-gradient(ellipse 72% 38% at 50% 0%, rgba(155,220,40,.09), transparent),
        radial-gradient(circle at 14% 44%, rgba(91,156,255,.12), transparent 22rem),
        linear-gradient(160deg, #1a2638 0%, #18315e 100%);
}