/* Case study pages — editorial layout on site.css tokens.
   Navy band hero (same signature surface as the homepage proof band),
   mono kickers with gold ◆, ruled content rows, gold display figures.
   No cards, no shadows: hairlines and type carry the design. */

/* ---- Hero band ---- */
.cs-hero {
    padding: 5rem 0 4rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-size: 56px 56px, 56px 56px, auto;
}
.cs-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.cs-kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-on-dark-muted);
    margin: 0 0 var(--space-4);
}
.cs-kicker .mark {
    color: var(--gold);
    display: inline-block;
    margin-right: var(--space-2);
    transform: translateY(-1px);
}
.cs-hero h1 {
    color: var(--fg-on-dark);
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 var(--space-5);
}
.cs-hero h1 em {
    color: var(--gold);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--fw-medium);
}
.cs-lede {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-lead);
    line-height: 1.55;
    max-width: 58ch;
    margin: 0;
}

/* ---- At-a-glance strip ---- */
.cs-glance {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.cs-glance-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    padding: var(--space-6) 0;
}
.cs-glance-item dt {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: var(--space-2);
}
.cs-glance-item dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 1.25rem;
    letter-spacing: var(--ls-tight);
    color: var(--navy);
}
@media (max-width: 860px) {
    .cs-glance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Body sections ---- */
.cs-section {
    padding: var(--space-8) 0;
}
.cs-section + .cs-section {
    padding-top: 0;
}
.cs-section-inner {
    max-width: 880px;
    margin: 0 auto;
}
.cs-section h2 {
    font-size: 1.625rem;
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-5);
}
.cs-section p {
    max-width: 66ch;
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-4);
}
.cs-section p:last-child {
    margin-bottom: 0;
}

/* Pull quote — Georgia italic on a gold rule, same accent system. */
.cs-pullquote {
    margin: var(--space-6) 0;
    padding-left: var(--space-5);
    border-left: 3px solid var(--gold);
}
.cs-pullquote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.45;
    color: var(--navy);
    max-width: 30ch;
    margin: 0;
}

/* The brief — four questions as a ruled 2×2 index. */
.cs-brief-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-7);
    border-top: 1px solid var(--line);
}
.cs-brief-item {
    border-bottom: 1px solid var(--line);
    padding: var(--space-5) 0;
}
.cs-brief-item .num {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    color: var(--gold);
}
.cs-brief-item h3 {
    margin: var(--space-2) 0 var(--space-2);
    font-size: 1.125rem;
    letter-spacing: var(--ls-tight);
}
.cs-brief-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    line-height: var(--lh-normal);
}
@media (max-width: 720px) {
    .cs-brief-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Workflow index — ruled rows like the homepage service index. */
.cs-workflows {
    border-top: 1px solid var(--line);
}
.cs-workflow-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(200px, 280px) 1fr;
    column-gap: var(--space-6);
    align-items: start;
    padding: var(--space-5) var(--space-2);
    border-bottom: 1px solid var(--line);
}
.cs-workflow-row .num {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    color: var(--gold);
    line-height: 2;
}
.cs-workflow-row h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.4;
    letter-spacing: var(--ls-tight);
}
.cs-workflow-row p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    line-height: var(--lh-normal);
    max-width: 58ch;
}
@media (max-width: 720px) {
    .cs-workflow-row {
        grid-template-columns: auto 1fr;
        row-gap: var(--space-2);
    }
    .cs-workflow-row p {
        grid-column: 1 / -1;
    }
}

/* Results — measured-not-assumed strip. Slots render an em-dash until
   confirmed numbers replace them; the mono note says why. */
.cs-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
    border-top: 1px solid var(--line);
    padding-top: var(--space-5);
}
.cs-result dt {
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
}
.cs-result dd {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: var(--ls-tight);
    color: var(--gold);
}
.cs-result .cs-result-note {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-tiny);
    letter-spacing: 0.08em;
    color: var(--text-light);
}
@media (max-width: 720px) {
    .cs-results-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Closing CTA band ---- */
.cs-cta {
    margin-top: var(--space-7);
    padding: 5rem 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-size: 56px 56px, 56px 56px, auto;
}
.cs-cta-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.cs-cta h2 {
    color: var(--fg-on-dark);
    margin: 0 0 var(--space-4);
}
.cs-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--space-6);
}
.cs-cta .cta-button-white {
    display: inline-block;
    background: white;
    color: var(--navy);
    padding: 1rem 2.5rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: 1.125rem;
    transition: all var(--duration-base) var(--ease);
    box-shadow: var(--shadow-cta);
}
.cs-cta .cta-button-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
    .cs-hero {
        padding: 4rem 0 3rem;
    }
    .cs-section {
        padding: var(--space-7) 0;
    }
}