/* Case-study pages (/case-studies/*) - builds on portfolio.css, scoped to .case-study-page */

.case-study-page .cs-breadcrumb { font-size: .875rem; color: rgba(255, 255, 255, .7); }
.case-study-page .cs-breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.case-study-page .cs-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.case-study-page .cs-breadcrumb span[aria-current] { color: #fff; }

.case-study-page .pf-hero .pf-phone:first-child { margin-bottom: 2rem; }
.case-study-page .pf-hero .pf-browser img { max-height: 420px; object-fit: cover; object-position: top; }

.case-study-page .cs-section + .cs-section { margin-top: 3.5rem; }
.case-study-page .cs-section h2 {
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    color: var(--pf-heading);
    margin-bottom: 1rem;
}
.case-study-page .cs-section p,
.case-study-page .cs-section li { font-size: 1.0625rem; line-height: 1.75; color: #374151; }

.case-study-page .cs-glance {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--pf-border);
    border-radius: 14px;
    overflow: hidden;
}
.case-study-page .cs-glance th,
.case-study-page .cs-glance td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--pf-border); vertical-align: top; }
.case-study-page .cs-glance tr:last-child th,
.case-study-page .cs-glance tr:last-child td { border-bottom: 0; }
.case-study-page .cs-glance th { width: 32%; background: #f6f8fc; font-weight: 600; color: var(--pf-heading); }
.case-study-page .cs-glance a { color: var(--pf-primary); }

.case-study-page .cs-built,
.case-study-page .cs-results { padding-left: 1.25rem; margin-bottom: 0; }
.case-study-page .cs-built li + li,
.case-study-page .cs-results li + li { margin-top: .6rem; }
.case-study-page .cs-built strong { color: var(--pf-heading); }
.case-study-page .cs-results li::marker { color: var(--pf-primary); }

.case-study-page .cs-figure { margin: 2rem 0 0; }

.case-study-page .cs-section a:not(.pf-tag):not(.pf-link) { color: var(--pf-primary); }
.case-study-page a.pf-tag:hover { background: var(--pf-primary); color: #fff; }

.case-study-page .cs-cta {
    background: var(--pf-gradient);
    border-radius: 20px;
    padding: 3.5rem 1.5rem;
}
.case-study-page .cs-cta p { color: rgba(255, 255, 255, .85); max-width: 640px; margin-left: auto; margin-right: auto; }

@media (max-width: 575.98px) {
    .case-study-page .cs-glance th { width: 40%; }
    .case-study-page .cs-glance th,
    .case-study-page .cs-glance td { padding: .7rem .8rem; font-size: .9375rem; }
}

/* case-study cards on /portfolio and the home page */
.cs-card {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.cs-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35); }
.cs-card-shot { display: block; height: 220px; overflow: hidden; background: #eef1f6; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.cs-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.cs-card-meta { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #175cff; }
.cs-card-body h3 { font-size: 1.25rem; font-weight: 700; margin: .5rem 0 .75rem; color: #262626; }
.cs-card-body h3 a { color: inherit; text-decoration: none; }
.cs-card-body h3 a:hover { color: #175cff; }
.cs-card-body p { color: #4b5563; margin-bottom: 1rem; }
.cs-card-stat { font-weight: 700; color: #2e3192; margin-bottom: 1rem; }
.cs-card-link { margin-top: auto; font-weight: 700; color: #175cff; text-decoration: none; }
.cs-card-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .cs-card { transition: none; } }

/* "Read the case study" button inside each /portfolio section */
.portfolio-page .pf-link--case { background: var(--pf-primary); border-color: var(--pf-primary); color: #fff; }
.portfolio-page .pf-link--case:hover { background: #0f47cc; border-color: #0f47cc; color: #fff; }