/* Case-study pages — scoped styles. Do not merge into app.css.
   Everything here is namespaced under .case-study-page so it never
   leaks onto the rest of the site. */

.case-study-page {
    --cs-cream: #F8F4ED;
    --cs-cream-card: #ECEBE0;
    --cs-forest: #0F261C;
    --cs-forest-card: #16311F;
    --cs-lime: #9BC53D;
    --cs-ink: #0F261C;
    --cs-sage: #5D7962;
    --cs-on-dark: #F8F4ED;
    --cs-on-dark-muted: rgba(248, 244, 237, .58);
    --cs-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cs-display-font: "Space Grotesk", var(--cs-body-font);
}

.case-study-page section {
    padding-block: 120px;

}

.case-study-page blockquote {
    margin: 0;
}

/* app.css styles bare h1/h1>span for the homepage hero (underline accent,
   nowrap, fixed color) — neutralise those here so this page's own headings
   aren't affected by them. */
.case-study-page h1>span {
    display: block;
    position: static;
    white-space: normal;
}

.case-study-page h1>span::after {
    content: none;
}

.case-study-page h1,
.case-study-page h2,
.case-study-page h3 {
    font-family: var(--cs-display-font);
    letter-spacing: -0.01em;
    margin: 0;
}

/* ---------- nav ---------- */

/* .cs-nav {
    background: var(--cs-cream);
    border-bottom: 1px solid rgba(15, 38, 28, .1);
} */

.cs-nav .header {
    height: 99px;
    padding-block: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cs-nav .header nav {
    font-family: inherit;
}

@media (max-width: 760px) {
    .cs-nav .header {
        height: 76px;
    }
}

/* ---------- shared bits ---------- */

.cs-eyebrow {
    text-transform: uppercase;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: 2.86px;
    line-height: 100%;
    color: #5E7A62;
    margin-bottom: 20px;
}

.cs-eyebrow--on-dark {
    color: var(--cs-lime);
}

.cs-eyebrow--hero {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cs-eyebrow--hero::after {
    content: "";
    width: 44px;
    height: 1px;
    background: var(--cs-sage);
    opacity: .5;
}

.cs-h2 {
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
    font-weight: 700;
}

.cs-h2 span {
    display: block;
    color: var(--cs-sage);
}

.cs-h2 span:first-child {
    color: var(--cs-ink);
}

.cs-h2--on-dark {
    color: var(--cs-on-dark);
}

.cs-h2--on-dark span {
    color: var(--cs-on-dark-muted);
}

.cs-h2--on-dark span:first-child {
    color: var(--cs-on-dark);
}

.case-study-page .wrap {
    width: min(1200px, 100% - 80px);
}

.cs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* ---------- hero ---------- */

.cs-hero {
    padding-top: 72px;
}

.cs-hero .cs-two-col {
    align-items: center;
}

.cs-hero h1 {
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 24px;
}

.cs-hero h1 span {
    display: block;
}

.cs-hero h1 span:first-child {
    color: var(--cs-ink);
}

.cs-hero h1 span:not(:first-child) {
    color: var(--cs-sage);
}

.cs-lead {
    font-size: 17px;
    line-height: 1.6;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: var(--cs-sage);
    max-width: 46ch;
    margin: 0 0 40px;
}

.cs-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 480px;
}

.cs-meta-chip {
    background: var(--cs-cream-card);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    border: 1px solid #10271c14;
}

.cs-meta-chip-label {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: var(--cs-sage);
}

.cs-meta-chip-value {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: var(--cs-ink);
}

.cs-hero-panel {
    /* background: var(--cs-forest-card); */
    /* border-radius: 24px; */
    /* padding: 24px; */
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cs-hero-panel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* shown only when a case study's real screenshot isn't on disk yet —
   keeps the layout intact instead of a broken image */
.cs-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--cs-forest-card);
    color: var(--cs-sage);
    text-align: center;
    padding: 24px;
}

.cs-image-placeholder svg {
    opacity: .5;
}

.cs-image-placeholder span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.cs-image-placeholder--portrait {
    aspect-ratio: 3 / 4;
}

.cs-image-placeholder--wide {
    aspect-ratio: 16 / 9;
}

/* ---------- problem ---------- */

.cs-problem-copy .cs-h2 {
    margin-bottom: 32px;
}

.cs-problem-block {
    background: var(--cs-cream-card);
    box-shadow: inset 104px 0px 0px -100px #10271C;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.cs-problem-block p,
.cs-problem-more {
    font-size: 16px;
    line-height: 1.6;
    color: #384038;
    margin: 0;
}

.cs-quote-card {
    background: var(--cs-forest-card);
    border-radius: 16px;
    padding: 40px;
}

.cs-quote-glyph {
    /* font-family: Georgia, serif; */
    font-family: var(--cs-display-font);
    font-size: 96px;
    line-height: 1;
    color: var(--cs-lime);
    font-weight: 700;
    margin-bottom: 0px;
}

.cs-quote-text {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 300;
    color: var(--cs-on-dark);
}

.cs-quote-card .cs-quote-text {
    margin: 0 0 24px;
    font-family: var(--cs-display-font);
}

.cs-quote-label {
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'Inter';
    letter-spacing: 0.1em;
    color: var(--cs-lime);
}

/* ---------- #stackSection: stacking-cards route timeline (dark) ----------
   Self-contained: every selector below is scoped under #stackSection so it
   cannot affect any other section, and it defines its own local custom
   properties instead of reading page-level ones, so it has no dependency
   on (and no effect on) anything outside this id. ---------- */

#stackSection {
    --stack-bg: #0b1a10;
    --stack-card: #16301f;
    --stack-card-active: #1c3a26;
    --stack-lime: #a8e600;
    --stack-ink: #f5f7f4;
    --stack-muted: rgba(245, 247, 244, .5);
    --stack-body: #c7d3c2;
    background: var(--stack-bg);
    padding-block: 72px;
}

#stackSection .stack-eyebrow {
    text-transform: uppercase;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--stack-lime);
    margin-bottom: 20px;
}

#stackSection .stack-headline {
    font-family: var(--cs-display-font);
    font-size: clamp(28px, 4.4vw, 48px);
    line-height: 1.12;
    font-weight: 700;
    margin: 0 0 32px;
}

#stackSection .stack-headline span {
    display: block;
}

#stackSection .stack-headline-primary {
    color: var(--stack-ink);
}

#stackSection .stack-headline-muted {
    color: var(--stack-muted);
}

/* ---- stack-wrap: reference "stacking cards" mechanism ----
   Each .stack-card is its own sticky element; the dot and the card body
   live as siblings INSIDE that same sticky wrapper (not a separate rail),
   so the dot always travels with its own card. Overlap between cards is
   native sticky-sibling behavior (small margin-bottom, no artificial
   slot heights or negative-margin tricks). ---- */

#stackSection .stack-wrap {
    position: relative;
}

#stackSection .timeline-line {
    position: absolute;
    left: 28px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(168, 230, 0, .35), rgba(168, 230, 0, .08));
    z-index: 0;
}

#stackSection .stack-card {
    position: sticky;
    top: 6vh;
    margin-bottom: 3rem;
    display: flex;
    gap: 1.75rem;
}

#stackSection .stack-card:last-child {
    margin-bottom: 0;
}

#stackSection .dot-col {
    flex: 0 0 56px;
    display: flex;
    justify-content: center;
    padding-top: 2.4rem;
    position: relative;
    z-index: 2;
}

/* fixed-size circle, always — only color/border/glow may change, never size or shape */
#stackSection .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #29401f;
    border: 2px solid #6f9a1f;
    transition: background .4s ease, box-shadow .4s ease, border-color .4s ease, opacity .3s ease;
}

#stackSection .dot.active {
    background: var(--stack-lime);
    border-color: var(--stack-lime);
    box-shadow: 0 0 0 6px rgba(168, 230, 0, .15), 0 0 16px rgba(168, 230, 0, .55);
}

/* a phase that's already been passed is covered by the active card anyway —
   hide its dot outright instead of relying on it sitting exactly under the
   active one, since sticky siblings can drift apart near the end of the
   shared container and reveal it as a stray dim circle */
#stackSection .dot.done {
    opacity: 0;
}

#stackSection .card-inner {
    flex: 1;
    background: var(--stack-card);
    border: 1px solid rgba(199, 211, 194, .16);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
    transform-origin: top center;
    transition: transform .45s cubic-bezier(.22, .68, 0, 1.01), filter .45s ease;
    will-change: transform, filter;
}

#stackSection .phase-label {
    display: block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    letter-spacing: .12em;
    color: var(--stack-lime);
    margin: 0 0 16px;
}

#stackSection .card-inner h3 {
    font-family: var(--cs-display-font);
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 700;
    color: var(--stack-ink);
    margin: 0 0 14px;
    line-height: 1.25;
}

#stackSection .card-inner p {
    font-size: 15px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    line-height: 1.65;
    color: var(--stack-body);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    #stackSection .card-inner,
    #stackSection .dot {
        transition: none;
        animation: none;
    }
}

/* ---------- evidence wall ---------- */

.cs-evidence .cs-h2 {
    margin-bottom: 48px;
}

.cs-evidence-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: start;
}

.cs-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cs-feature-card {
    background: var(--cs-cream-card);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #10271c1a;
}

.cs-feature-card:nth-child(5) {
    grid-column: 1 / -1;
}

.cs-feature-badge {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #10271C;
    color: #F8F5ED;
    font-family: var(--cs-display-font);
    font-size: 14px;
    letter-spacing: 0.4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.cs-feature-heading {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 10px !important;
}

.cs-feature-label {
    color: var(--cs-ink);
    font-weight: 700;
    display: block;
}

.cs-feature-title {
    color: var(--cs-sage);
    font-weight: 700;
}

.cs-feature-body {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: #5E7A62;
}

.cs-evidence-image {
    border-radius: 24px;
    overflow: hidden;
    background: var(--cs-forest);
}

.cs-evidence-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- console log (dark) ---------- */

.cs-console {
    background: var(--cs-forest);
}

.cs-console .cs-h2 {
    margin-bottom: 40px;
}

.cs-console-image {
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 40px;
}

.cs-console-image img {
    width: 100%;
    display: block;
}

.cs-console-body {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--cs-on-dark-muted);
    margin: 0;
}

/* ---------- metrics ---------- */

.cs-metrics .cs-h2 {
    margin-bottom: 48px;
}

.cs-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cs-metric-card {
    position: relative;
    background: var(--cs-cream-card);
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid #10271c1a;
}

.cs-metric-index {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--cs-display-font);
    font-size: 12px;
    color: var(--cs-sage);
}

.cs-metric-value-row {
    font-family: var(--cs-display-font);
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 20px;
}

.cs-metric-value {
    font-family: var(--cs-display-font);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    color: var(--cs-ink);
    line-height: 1;
}

.cs-metric-currency {
    color: var(--cs-lime);
}

.cs-metric-unit {
    font-size: 22px;
    font-weight: 600;
    color: var(--cs-lime);
}

.cs-metric-caption {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2.64px;
    color: var(--cs-sage);
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
}

/* ---------- client voice (dark) ---------- */

.cs-client-voice {
    background: var(--cs-forest);
}

.cs-client-voice-block {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.cs-client-voice .cs-quote-glyph {
    display: inline-block;
}

.cs-client-quote {
    font-family: var(--cs-display-font);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--cs-on-dark);
    text-align: center;
    text-wrap: balance;
}

.cs-client-voice-block .cs-client-quote {
    margin: 0 auto 32px;
}

.cs-client-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.cs-client-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(248, 244, 237, .3);
    background: transparent;
    color: var(--cs-on-dark);
    font-family: var(--cs-display-font);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-client-meta {
    text-align: left;
}

.cs-client-name {
    font-weight: 700;
    color: var(--cs-on-dark);
}

.cs-client-role {
    color: var(--cs-on-dark-muted);
    font-size: 15px;
    margin-top: 4px;
}

/* ---------- cta ---------- */

.cs-cta {
    background: var(--cs-cream);
    padding-bottom: 80px;
}

.cs-cta-eyebrow {
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--cs-sage);
    margin-bottom: 32px;
}

.cs-cta-card {
    background: var(--cs-forest);
    border-radius: 32px;
    padding: 88px 40px;
    text-align: center;
}

.cs-cta-heading {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--cs-on-dark);
}

.cs-cta-card .cs-cta-heading {
    margin: 0 0 40px;
}

/* ---------- index (case studies listing) ---------- */

.case-study-page .cs-index-hero {
    padding-bottom: 0;
}

.cs-index-h1 {
    font-family: var(--cs-display-font);
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.06;
    font-weight: 700;
    margin: 0 0 24px;
}

.cs-index-h1 span {
    display: block;
}

.cs-index-h1 span:first-child {
    color: var(--cs-ink);
}

.cs-index-h1 span:not(:first-child) {
    color: var(--cs-sage);
}

.cs-index-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.cs-index-card {
    display: flex;
    flex-direction: column;
    background: var(--cs-cream-card);
    border: 1px solid #10271c14;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cs-index-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -24px rgba(15, 38, 28, .35);
}

.cs-index-card-image {
    aspect-ratio: 4 / 3;
    background: var(--cs-forest);
    overflow: hidden;
}

.cs-index-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-index-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-index-card-eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--cs-sage);
}

.cs-index-card-name {
    font-family: var(--cs-display-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--cs-ink);
    margin: 0;
}

.cs-index-card-lead {
    font-size: 14.5px;
    line-height: 1.55;
    font-family: "Inter", sans-serif;
    color: #5E7A62;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-index-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.cs-index-card-chip {
    font-size: 12px;
    font-weight: 600;
    color: var(--cs-ink);
    background: var(--cs-cream);
    border-radius: 999px;
    padding: 6px 12px;
}

/* ---------- reused footer, re-themed dark to match this page family ---------- */

.case-study-page footer.site-footer {
    background: var(--cs-forest);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
    padding-inline: max(40px, calc((100% - 1200px) / 2));
}

.case-study-page footer.site-footer .footer-top {
    border-bottom-color: rgba(248, 244, 237, .15);
}

.case-study-page footer.site-footer .footer-tagline,
.case-study-page footer.site-footer .footer-bottom>span {
    color: var(--cs-on-dark-muted);
}

.case-study-page footer.site-footer .footer-links a {
    color: var(--cs-on-dark);
}

.case-study-page footer.site-footer .social-icon {
    background: var(--cs-forest-card);
    color: var(--cs-on-dark);
}

.case-study-page footer.site-footer .social-icon:hover {
    background: var(--cs-lime);
    color: var(--cs-forest);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .case-study-page section {
        padding-block: 72px;
    }

    .cs-two-col,
    .cs-evidence-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cs-feature-grid {
        grid-template-columns: 1fr;
    }

    .cs-feature-card:nth-child(5) {
        grid-column: auto;
    }

    .cs-metrics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-meta-grid {
        max-width: none;
    }

    .cs-index-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-cta-card {
        padding: 56px 28px;
    }

    .cs-cta {
        padding-bottom: 48px;
    }

    #stackSection .timeline-line {
        left: 20px;
    }

    #stackSection .stack-card {
        gap: 1rem;
    }

    #stackSection .dot-col {
        flex-basis: 40px;
        padding-top: 2rem;
    }

    #stackSection .dot {
        width: 10px;
        height: 10px;
    }

    #stackSection .card-inner {
        padding: 28px 24px;
        border-radius: 18px;
    }
}

@media (max-width: 560px) {
    .cs-metrics-grid {
        grid-template-columns: 1fr;
    }

    .cs-meta-grid {
        grid-template-columns: 1fr;
    }

    .cs-index-grid {
        grid-template-columns: 1fr;
    }

    #stackSection .stack-headline {
        margin-bottom: 24px;
    }

    #stackSection .card-inner h3 {
        font-size: 19px;
    }

    #stackSection .card-inner p {
        font-size: 14.5px;
    }
}