/* ============================================================================
   customers.css — /customers/ index + the shared case-study shell.

   Loaded after home.css, which supplies the band system, headings, buttons,
   .stack-list and .screen. Nothing here restyles those; this file only adds the
   pieces the case-study structure needs and that no other page has: the hero
   stat strip, the customer fact list, the need/built table, the metric grid,
   the pull quote, and the index cards.

   Mobile-first, matching home.css: single column by default, 860px is the
   layout breakpoint.
   ========================================================================= */

/* --- Hero stat strip -------------------------------------------------------
   Sits under the hero grid, inside .hero-v2 (which is position:relative with a
   grain layer at z-index 0), so it needs its own stacking context to stay above
   that overlay. */
.cs-hero-stats {
    position: relative;
    z-index: 1;
    list-style: none;
    max-width: 1140px;
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--edge);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
}
.cs-hero-stat-label {
    display: block;
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    color: var(--ink-45);
    margin-bottom: 0.5rem;
}
.cs-hero-stat-figure {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1;
    color: var(--yellow);
}

/* --- Customer: prose + fact list ----------------------------------------- */
.cs-split { display: grid; gap: 2.5rem; }
.cs-split-copy .big-body:first-child { margin-top: 0; }

.cs-facts { margin: 0; }
.cs-fact {
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 40, 80, 0.14);
}
.cs-fact:last-child { border-bottom: 1px solid rgba(0, 40, 80, 0.14); }
.cs-fact dt {
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    color: rgba(0, 40, 80, 0.55);
    margin-bottom: 0.4rem;
}
.cs-fact dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(0, 40, 80, 0.82);
}

/* --- Pull quotes ----------------------------------------------------------
   .cs-pullquote rides inside the challenge band; .cs-quote is the standalone
   testimonial band. Same voice, different scale. */
.cs-pullquote, .cs-quote { margin: 0; }
.cs-pullquote blockquote, .cs-quote blockquote { margin: 0; }
.cs-pullquote blockquote p, .cs-quote blockquote p {
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 300;
    line-height: 1.08;
    color: var(--cream);
    text-indent: -0.4em;   /* hang the opening quote mark on the margin */
}
.cs-pullquote blockquote p { font-size: clamp(1.7rem, 4.2vw, 2.6rem); }
.cs-quote blockquote p { font-size: clamp(2.1rem, 5.5vw, 3.6rem); max-width: 20ch; }
.cs-pullquote blockquote p::before, .cs-quote blockquote p::before { content: '\201C'; }
.cs-pullquote blockquote p::after, .cs-quote blockquote p::after { content: '\201D'; }

.cs-pullquote figcaption, .cs-quote figcaption {
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--yellow);
    margin-top: 1.75rem;
}
.cs-role {
    display: block;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--ink-55);
    margin-top: 0.45rem;
}
.cs-quote-band { text-align: left; }
.cs-pullquote + .big-body { margin-top: 2.5rem; }

/* --- Existing stack: the tools that were replaced ------------------------- */
.cs-tools {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}
.cs-tools li {
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    color: var(--ink-70);
    border: 1px solid var(--edge);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
}

.cs-note {
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 60ch;
    color: var(--ink-60);
    margin-top: 1.75rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--yellow);
}
.cs-note-dark {
    color: rgba(0, 40, 80, 0.7);
    border-left-color: var(--magenta);
}

/* --- Implementation: what they needed / what Janix ran -------------------- */
.cs-build {
    list-style: none;
    margin-top: 2.5rem;
    border-top: 1px solid var(--edge);
}
.cs-build li {
    display: grid;
    gap: 0.5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--edge);
}
.cs-build-head {
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.66rem;
    color: var(--ink-45);
    display: none;   /* column headers only make sense once there are columns */
}
.cs-need { color: var(--ink-72); font-size: 0.98rem; line-height: 1.55; }
.cs-built {
    color: var(--cream);
    font-size: 0.98rem;
    line-height: 1.55;
    padding-left: 1.1rem;
    border-left: 2px solid var(--yellow);
}

/* --- Results: the metric grid -------------------------------------------- */
.cs-metrics {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    margin-top: 3rem;
}
.cs-metric-figure {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.6rem, 7vw, 4rem);
    line-height: 0.95;
    color: var(--magenta);
}
.cs-metric-label {
    display: block;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(0, 40, 80, 0.14);
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(0, 40, 80, 0.75);
}

/* --- After the event ------------------------------------------------------
   Reuses .stack-list from home.css; only the top margin differs. */
.cs-after { margin-top: 3rem; }

.cs-download {
    margin-top: 2rem;
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 600;
}
.cs-download a { color: var(--ink-60); }
.cs-download a:hover { color: var(--yellow); }
.cs-download a:hover .arrow { transform: translateX(4px); }
.cs-download .arrow { display: inline-block; transition: transform 0.18s ease; }

/* ============================ INDEX PAGE ============================ */
.cs-index-hero .hero-v2-inner { grid-template-columns: 1fr; }
.cs-index-hero .lede { max-width: 54ch; }

.cs-index { list-style: none; display: grid; gap: 3rem; }
.cs-card {
    background: var(--cream);
    border: 1px solid rgba(0, 40, 80, 0.14);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 70px -40px rgba(0, 40, 80, 0.45);
    display: grid;
}
.cs-card-media { display: block; background: var(--blue-deep); }
.cs-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-card-body { padding: 2.25rem 1.75rem 2rem; }
.cs-card-body h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1;
    color: var(--blue);
    margin-bottom: 0.75rem;
}
.cs-card-body h2 a { color: inherit; text-decoration: none; }
.cs-card-body h2 a:hover { color: var(--magenta); }
.cs-card-body h2 a:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.cs-card-meta {
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    color: rgba(0, 40, 80, 0.55);
}
.cs-card-body .big-body { margin-top: 1.25rem; }

.cs-card-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 40, 80, 0.14);
}
.cs-card-stat-figure {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    line-height: 1;
    color: var(--magenta);
}
.cs-card-stat-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: rgba(0, 40, 80, 0.65);
}
.cs-card-credit {
    margin-top: 1.75rem;
    font-size: 0.68rem;
    color: rgba(0, 40, 80, 0.5);
}
.cs-card-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cs-card-credit a:hover { color: var(--magenta); }

.cs-index-note {
    margin-top: 3rem;
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 56ch;
    color: rgba(0, 40, 80, 0.7);
    padding-left: 1.1rem;
    border-left: 2px solid var(--magenta);
}

/* ============================ RESPONSIVE ============================ */
@media (min-width: 620px) {
    .cs-hero-stats { grid-template-columns: repeat(4, 1fr); }
    .cs-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
    .cs-split { grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: start; }
    .cs-build li { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: baseline; }
    .cs-build-head { display: grid; }
    .cs-card { grid-template-columns: 1fr 1.25fr; align-items: stretch; }
    .cs-card-body { padding: 3rem 2.75rem; }
}