/* =========================================
   CASE STUDY PAGE — expanded narrative blocks
   Layers on top of case-study.css (.bcs-* classes)
   ========================================= */

.csp-block {
    max-width: 880px;
    margin: 0 auto;
    padding: 78px 32px;
}

.csp-block--wide { max-width: 1040px; }

.csp-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #FDB71A;
    opacity: 0.85;
    margin-bottom: 16px;
}

.csp-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
}

.csp-heading .gold { color: #FDB71A; }

.csp-lead {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
    font-weight: 300;
}

.csp-lead strong { color: #ffffff; font-weight: 600; }

.csp-lead:last-child { margin-bottom: 0; }

/* Pull quote */
.csp-pull {
    border-left: 3px solid #FDB71A;
    padding: 6px 0 6px 26px;
    margin: 34px 0;
}

.csp-pull p {
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 500;
    color: #FDB71A;
    line-height: 1.45;
    margin: 0;
    letter-spacing: -0.005em;
}

/* ----- Challenge cards (3) ----- */
.csp-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.csp-chal {
    padding: 30px 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(253, 183, 26, 0.18);
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s ease;
}

.csp-chal:hover { transform: translateY(-5px); border-color: rgba(253, 183, 26, 0.45); }

.csp-chal-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(253, 183, 26, 0.1);
    border: 1px solid rgba(253, 183, 26, 0.3);
    color: #FDB71A;
    margin-bottom: 18px;
}
.csp-chal-icon svg { width: 24px; height: 24px; }

.csp-chal h3 {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #ffffff;
    margin: 0 0 10px;
}

.csp-chal p {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ----- ATP approach trio ----- */
.csp-atp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 44px;
}

.csp-atp {
    position: relative;
    padding: 34px 28px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border: 1px solid rgba(253, 183, 26, 0.2);
}

.csp-atp-step {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #FDB71A;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.csp-atp h3 {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.csp-atp p {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* ----- Outcome band ----- */
.csp-outcome {
    background: linear-gradient(160deg, rgba(253,183,26,0.08), rgba(253,183,26,0.02));
    border-top: 1px solid rgba(253,183,26,0.18);
    border-bottom: 1px solid rgba(253,183,26,0.18);
}

/* ----- Closing CTA: one clear next step ----- */
.csp-final {
    text-align: center;
    padding: 96px 32px 110px;
    max-width: 780px;
    margin: 0 auto;
}

.csp-final-lead {
    font-size: 18px;
    line-height: 1.75;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
    max-width: 620px;
    margin: 0 auto 38px;
}

.csp-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 44px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    color: #1A0A3C;
    background: linear-gradient(145deg, #FFD460, #FDB71A);
    box-shadow: 0 16px 34px -12px rgba(253, 183, 26, 0.6);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.csp-final-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -14px rgba(253, 183, 26, 0.75);
}

.csp-final-trust {
    margin: 20px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.45);
}

.csp-final-alt {
    max-width: 560px;
    margin: 46px auto 0;
    padding-top: 30px;
    border-top: 1px solid rgba(253, 183, 26, 0.14);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

.csp-final-alt a {
    color: #FDB71A;
    text-decoration: none;
    border-bottom: 1px solid rgba(253, 183, 26, 0.4);
    padding-bottom: 1px;
    transition: border-color 0.25s ease;
}

.csp-final-alt a:hover { border-bottom-color: #FDB71A; }

/* =========================================
   SERIF TUNING OVERRIDES for shared .bcs-* rows
   (case-study.css must stay untouched; these load after it)
   ========================================= */

/* Hero */
.bcs-hero-label { font-family: var(--font-body); font-weight: 600; }

.bcs-hero-company {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.bcs-hero-tagline {
    font-family: var(--font-heading);
    font-weight: 500;
    font-style: italic;
    font-size: 17px;
}

/* Research row (white panel) */
.bcs-research-label { font-family: var(--font-body); font-weight: 600; }

.bcs-research-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Metrics: the premium numbers moment */
.bcs-metrics-row {
    background:
        radial-gradient(1000px 480px at 50% -10%, rgba(253, 183, 26, 0.08), transparent 62%),
        #160830;
    padding: 116px 40px 124px;
}

.bcs-metrics-label {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 78px;
}

.bcs-metrics-grid { max-width: 1160px; margin: 0 auto; }

.bcs-metric-number {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(66px, 8.4vw, 106px);
    letter-spacing: -0.015em;
    color: #FDB71A;
    text-shadow: 0 0 70px rgba(253, 183, 26, 0.28);
    margin-bottom: 20px;
}

.bcs-metric-divider {
    width: 44px;
    height: 1px;
    opacity: 0.5;
    margin: 22px auto;
}

.bcs-metric-name {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 3px;
}

.bcs-metric-caption {
    font-size: 15px;
    line-height: 1.7;
    max-width: 240px;
}

.bcs-metric--bordered { border-left-color: rgba(253, 183, 26, 0.12); }

/* Human moment */
.bcs-human-big,
.bcs-quote-big {
    font-family: var(--font-heading);
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.01em;
}

.bcs-human-big { font-size: clamp(56px, 7vw, 92px); }

.bcs-quote-big {
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.15;
}

/* NPS */
.bcs-nps-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.01em;
}

.bcs-nps-number {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(84px, 9vw, 122px);
    letter-spacing: -0.015em;
    text-shadow: 0 0 70px rgba(253, 183, 26, 0.28);
}

.bcs-nps-tag { font-family: var(--font-body); font-weight: 600; }

.bcs-nps-closer { font-weight: 700; }

/* Endorsement (white panel) */
.bcs-lead-quote {
    font-family: var(--font-heading);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(26px, 3.4vw, 34px);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.bcs-attr { font-family: var(--font-body); font-weight: 600; }

/* Sector closer */
.bcs-cta-main {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(20px, 2.6vw, 26px);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .csp-block { padding: 52px 22px; }
    .csp-challenge-grid,
    .csp-atp-grid { grid-template-columns: 1fr; }
    .csp-final { padding: 60px 22px 72px; }
    .bcs-metrics-row { padding: 64px 24px 72px; }
    .bcs-metrics-label { margin-bottom: 52px; }
    .bcs-metric--bordered { border-left: none; }
}