/* Case study detail page.
   Scoped under .case-study-detail. Reuses the theme's own components wherever
   they exist (.numberBox, .fssBox, .contentBox, .imgBox, .list, .btn) and only
   adds what the theme has no equivalent for: the investor reply cards, the
   outcome band and the closing call to action. */

/* ---------- hero ----------
   Follows the reviews page (template-testimonial.php): a paleYellow field with
   a grid-line texture, absolutely positioned star and cloud vectors, and a
   yellow badge label. The site header is fixed, so it needs top clearance. */
.case-study-detail .cs-hero {
    padding: 150px 0 90px;
    border-bottom: 2px solid #4d4d4d;
    overflow: hidden;
}

.case-study-detail .cs-hero .bg-grid-line {
    top: 0;
    left: 0;
    width: 100%;
    opacity: .55;
}

.case-study-detail .cs-hero .bg-grid-line img {
    width: 100%;
}

.case-study-detail .cs-hero .spot-star-blue {
    top: 170px;
    left: -46px;
}

.case-study-detail .cs-hero .spot-star-orange {
    bottom: -30px;
    right: -24px;
}

.case-study-detail .cs-hero .spot-star-one {
    left: 13%;
    top: 22%;
}

.case-study-detail .cs-hero .spot-star-two {
    bottom: 16%;
    left: 9%;
}

.case-study-detail .cs-hero .spot-star-three {
    right: 11%;
    top: 38%;
}

.case-study-detail .cs-hero .spot-cloud {
    right: 14%;
    top: 15%;
}

.case-study-detail .z-index-1 {
    z-index: 1;
}

/* the yellow label, same construction as .spotlight-testimonial h1 but sized
   for a short eyebrow rather than a full headline */
.case-study-detail .cs-badge {
    display: inline-block;
    font-family: Lexend, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: #f9ce0b;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 9px 18px;
    margin: 0 auto 24px;
}

.case-study-detail .cs-hero .sec-title {
    padding-bottom: 14px;
}

.case-study-detail .cs-hero .sec-heading {
    padding-bottom: 0;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- number bands ----------
   IMPORTANT: the theme scopes its component CSS to the page-template class,
   e.g. `.investor-outreach .idealInvestor .numberBox`. A new template does not
   inherit those rules, so the component is restated here under
   `.case-study-detail` using the theme's own values. Keep these in sync with
   style.css if the component ever changes there. */
.case-study-detail .cs-numbers .numberBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.case-study-detail .cs-numbers .numberBox .box {
    padding: 90px 50px;
    text-align: center;
    display: grid;
    gap: 24px 0;
    align-content: center;
}

.case-study-detail .cs-numbers .numberBox .box .numericTitle {
    font-size: 42px;
    font-family: Lexend, sans-serif;
    font-weight: 700;
    line-height: normal;
    font-variant-numeric: tabular-nums;
}

.case-study-detail .cs-numbers .numberBox .box .info {
    font-size: 20px;
    line-height: 32px;
    font-family: 'IBM Plex Mono', monospace;
    margin: 0;
}

.case-study-detail .cs-numbers .numberBox .box:nth-of-type(odd) {
    background: #0271ee;
    color: #fff;
}

.case-study-detail .cs-numbers .numberBox .box:nth-of-type(2n) {
    background: #fff;
    color: #000;
}

.case-study-detail .cs-numbers .numberBox .box:nth-of-type(2n) .info {
    color: #4d4d4d;
}

@media (max-width: 992px) {
    .case-study-detail .cs-numbers .numberBox {
        grid-template-columns: auto;
    }

    .case-study-detail .cs-numbers .numberBox .box {
        padding: 44px 30px;
        gap: 10px 0;
    }

    .case-study-detail .cs-numbers .numberBox .box .numericTitle {
        font-size: 28px;
    }

    .case-study-detail .cs-numbers .numberBox .box .info {
        font-size: 17px;
        line-height: 27px;
    }
}

/* ---------- centred section headers ---------- */
/* dynPadLeft / dynPadRight carry no CSS of their own — all.js sets them inline:
       e = WinWd - $(".container").width();  $(".dynPadLeft").css("padding-left", e/2)
   On first paint the container's max-width has not applied yet, so e computes to
   0 and the script writes `padding-left: 0px` INLINE, which outranks any normal
   stylesheet rule. The copy then sits flush against the viewport until some
   later resize recalculates it. Replicating the same intent in CSS fixes first
   paint; !important is required purely to outrank that inline 0.
   Only >992px, which is the width at which all.js applies the padding at all. */
@media (min-width: 992px) {
    .case-study-detail .cs-split .contentBox.dynPadLeft {
        padding-left: max(70px, calc((100vw - 1280px) / 2)) !important;
    }

    .case-study-detail .cs-split .contentBox.dynPadRight {
        padding-right: max(70px, calc((100vw - 1280px) / 2)) !important;
    }
}

.case-study-detail .cs-intro {
    background: #fff;
}

.case-study-detail .cs-intro .sec-heading {
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 0;
}

/* ---------- the two split panels ---------- */
/* the theme's .imgBox expects an illustration. These carry a figure instead. */
.case-study-detail .cs-quotebox {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.case-study-detail .cs-bigstat {
    text-align: center;
}

.case-study-detail .cs-bigstat-num {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

/* matches the theme's .info size (24px/38px IBM Plex Mono) so these captions
   sit at the same weight as every other supporting line on the site */
.case-study-detail .cs-bigstat-lbl {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: .02em;
    color: #1a1a1a;
    margin: 16px 0 0;
}

/* ---------- investor replies ---------- */
/* the intro heading block above supplies most of the gap, but not all of it —
   without this the first card's top border lands exactly on the boundary
   between the white intro and the paleYellow band and reads as a cut edge */
.case-study-detail .cs-replies-sec {
    padding-top: 18px;
}

.case-study-detail .cs-replies {
    display: grid;
    gap: 20px;
    max-width: 1060px;
    margin: 0 auto;
}

@media (min-width: 820px) {
    .case-study-detail .cs-replies {
        grid-template-columns: 1fr 1fr;
    }
}

.case-study-detail .cs-reply {
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    padding: 26px 28px 22px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.case-study-detail .cs-ask {
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6f6f6f;
}

.case-study-detail .cs-reply blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15.5px;
    line-height: 1.8;
    color: #333;
    font-style: normal;
}

.case-study-detail .cs-who {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 18px;
    border-top: 2px solid #1a1a1a;
    margin-top: auto;
}

.case-study-detail .cs-ph {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 2px solid #1a1a1a;
}

.case-study-detail .cs-nm {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.case-study-detail .cs-nm b {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.case-study-detail .cs-nm i {
    font-style: normal;
    font-size: 12.5px;
    color: #6f6f6f;
}

.case-study-detail .cs-lg {
    height: 28px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    flex: none;
    background: #fff;
    border-radius: 5px;
    padding: 2px 4px;
}

/* the masked founder and company names, as the source PDF shows them */
.case-study-detail .cs-rd {
    display: inline-block;
    width: 2.4em;
    height: .95em;
    background: #1a1a1a;
    border-radius: 2px;
    vertical-align: -.1em;
}

.case-study-detail .cs-rd-w {
    width: 4.6em;
}

/* ---------- close: outcome, call to action ---------- */
.case-study-detail .cs-close {
    background: #fff;
}

.case-study-detail .cs-outcome,
.case-study-detail .cs-cta,
.case-study-detail .cs-dl {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.case-study-detail .cs-outcome {
    background: #5ec46f;
    border: 2px solid #1a1a1a;
    border-radius: 16px;
    padding: 30px 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 26px;
}

.case-study-detail .cs-amt {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: #12261a;
    font-variant-numeric: tabular-nums;
}

.case-study-detail .cs-lbl {
    font-size: 14px;
    line-height: 1.6;
    color: #1d3527;
}

.case-study-detail .cs-cta {
    background: #f9ce0b;
    border: 2px solid #1a1a1a;
    border-radius: 16px;
    padding: 34px 36px;
    margin-top: 24px;
}

.case-study-detail .cs-pill {
    display: inline-block;
    font-size: 12.5px;
    letter-spacing: .06em;
    border: 2px solid #1a1a1a;
    border-radius: 99px;
    padding: 5px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .45);
    color: #1a1a1a;
}

.case-study-detail .cs-cta h3 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 12px;
}

.case-study-detail .cs-cta p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #2a2513;
    margin: 0;
}

.case-study-detail .cs-firmwide {
    border-top: 2px solid rgba(26, 26, 26, .28);
    margin-top: 24px;
    padding-top: 20px;
    display: grid;
    /* 175px is the width the longest label ("Startups in discussion") needs at
       12.5px without wrapping — see the nowrap on .cs-firmwide span below. */
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 18px;
}

.case-study-detail .cs-cap {
    grid-column: 1 / -1;
    font-size: 11.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #5c5220;
    margin: 0 0 2px;
}

.case-study-detail .cs-firmwide b {
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.case-study-detail .cs-firmwide span {
    font-size: 12.5px;
    color: #4a4218;
    line-height: 1.55;
    white-space: nowrap;
}

.case-study-detail .cs-cta .btn {
    background: #fffeef;
}

/* the PDF download line, raised out of grey body text into a bordered callout
   so it reads as an offer rather than a footnote */
.case-study-detail .cs-dl {
    /* Must share the 860px track of .cs-outcome and .cs-cta above, otherwise it
       aligns to the column edge and sits ~200px to their left. Block, not
       inline-block or flex — flex would make the trailing full stop its own
       item and open a gap before it. */
    margin: 30px auto 0;
    display: block;
    max-width: 860px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #2a2513;
    background: #fffdf2;
    border: 2px solid #1a1a1a;
    border-radius: 10px;
    padding: 13px 20px;
    box-shadow: 3px 3px 0 rgba(26, 26, 26, .16);
}

.case-study-detail .cs-dl a {
    font-weight: 700;
    color: #0271ee;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.case-study-detail .cs-dl a:hover,
.case-study-detail .cs-dl a:focus-visible {
    color: #1a1a1a;
}

/* ---------- mobile ----------
   The theme already collapses .idealInvestor .numberBox to a single column,
   so the number bands need nothing here. */
@media (max-width: 767px) {
    .case-study-detail .cs-hero {
        padding: 110px 0 70px;
    }

    /* On a phone the hero is narrow and the copy fills it, so the two large
       starbursts land directly behind the headline and subheading and make
       them hard to read. The grid texture, small stars and cloud still carry
       the styling. Desktop is unaffected — there the copy sits between them. */
    .case-study-detail .cs-hero .spot-star-blue,
    .case-study-detail .cs-hero .spot-star-orange {
        display: none;
    }

    /* the remaining vectors sit in whitespace, but drop them back so no
       glyph ever competes with one */
    .case-study-detail .cs-hero .spot-star-one,
    .case-study-detail .cs-hero .spot-star-two,
    .case-study-detail .cs-hero .spot-star-three,
    .case-study-detail .cs-hero .spot-cloud {
        opacity: .45;
    }

    .case-study-detail .cs-hero .sec-heading {
        padding: 0 8px;
    }

    /* .padding drops from 70px to 32px on mobile, so the 18px above is no
       longer enough to keep the first card clear of the colour change */
    .case-study-detail .cs-replies-sec {
        padding-top: 28px;
    }

    .case-study-detail .cs-quotebox {
        min-height: 220px;
    }

    .case-study-detail .cs-bigstat-num {
        font-size: 44px;
    }

    .case-study-detail .cs-outcome,
    .case-study-detail .cs-cta {
        padding: 26px 22px;
    }

    .case-study-detail .cs-amt {
        font-size: 32px;
    }

    .case-study-detail .cs-cta h3 {
        font-size: 22px;
    }

    .case-study-detail .cs-reply {
        padding: 22px 20px 18px;
    }
}