/* ============================================================
   CASE STUDY — UNIFIED STYLESHEET
   Shared by: leading-legal-data, leading-educational,
              leading-logistics, growing-mid-sized
   ============================================================ */


/* ─── Hero Chip / Badge ──────────────────────────────────── */
.cs-hero-chip {
	display: inline-block;
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
	/*border: 1px solid rgba(214, 230, 255, 0.48);
	 */
    background: rgb(60 31 175 / 71%);
	color: #eaf2ff;
	font-size: 0.9rem;
	letter-spacing: 0.15em;
	font-weight: 500;
	margin-bottom: 1.5rem;
}


/* ─── Header Summary Block ───────────────────────────────── */
.cs-header-content {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.cs-header-content h1 {
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.2;
	margin: 0 0 1.5rem;
	font-weight: 500;
}

.cs-header-subtitle {
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.65;
	color: rgb(60, 31, 175);
	margin: 0;
	max-width: 72ch;
	margin-left: auto;
	margin-right: auto;
}
.mw-75{
	max-width: 75ch;
}


/* ─── Impact Metrics Row ─────────────────────────────────── */
.cs-impact-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	margin: 3rem 0;
}

.cs-metric-card {
	padding: 2rem;
	border-radius: 12px;
	/* border: 1px solid rgba(116, 150, 211, 0.28); */
	background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%);
	text-align: center;
}

.cs-metric-number {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.cs-metric-label {
	font-size: 1rem;
	color: #ffffff;
	margin: 0;
}


/* ─── Content Section Wrapper ────────────────────────────── */
.cs-content-section {
	padding: 3.5rem 0;
	border-bottom: 1px solid rgba(116, 150, 211, 0.15);
}

.cs-content-section:last-child {
	border-bottom: none;
}

.cs-section-header {
	margin-bottom: 2rem;
	/* text-align: center; */
}

.cs-section-label {
	color: rgb(60, 31, 175);
	font-size: 0.95rem;
	letter-spacing: 0.2em;
	font-weight: 600;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.cs-section-title {
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	margin: 0;
	font-weight: 500;
	line-height: 1.2;
}

.cs-section-intro {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #d0dbf6;
	margin: 1rem 0 0;
	max-width: 80ch;
}


/* ─── Body Text ──────────────────────────────────────────── */
.cs-text-content {
	display: grid;
	gap: 1.5rem;
	max-width: 85ch;
}

.cs-text-content p {
	font-size: 1.01rem;
	line-height: 1.85;
	color: #000000;
	margin: 0;
}


/* ─── Highlight / Callout Box ────────────────────────────── */
.cs-highlight {
	padding: 1.75rem 2rem;
	border-radius: 12px;
	border-left: 4px solid rgb(72 45 208);
    background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%);
	margin: 2rem 0;
}

.cs-highlight p {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #ffffff;
	margin: 0;
	font-style: italic;
}


/* ─── Solution Step Cards ────────────────────────────────── */
.cs-solution-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.cs-step-card {
	padding: 2rem;
	border-radius: 12px;
	/* border: 1px solid rgba(116, 150, 211, 0.28); */
	background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%);
	display: flex;
	flex-direction: column;
	transition: border-color 0.25s, background 0.25s;
}

/* .cs-step-card:hover {
	border-color: rgba(63, 137, 255, 0.5);
	background: rgba(8, 28, 70, 0.5);
} */

.cs-step-number {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(  -21deg,  #02021b 0%,  #140b4d 11%,  #2a1190 50%,  #5b2dff 109%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
	flex-shrink: 0;
}

.cs-step-card h4 {
	font-size: 1.2rem;
	margin: 0 0 0.85rem;
	font-weight: 600;
	color: #ffffff;
}

.cs-step-card p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.75;
	color: #ffffff;
}


/* ─── Impact Results List ────────────────────────────────── */
.cs-impact-list {
	display: grid;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.cs-impact-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.5rem;
	border-radius: 12px;
	/* border: 1px solid rgba(116, 150, 211, 0.18); */
	background: linear-gradient(135deg, #4824ce 0%, rgb(87 223 255) 100%);
}

.cs-impact-icon {
	width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255 255 255);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cs-impact-item h5 {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: #ffffff;
}

.cs-impact-item p {
	font-size: 0.97rem;
	line-height: 1.65;
	color: #ffffff;
	margin: 0;
}


/* ─── Testimonial Block ──────────────────────────────────── */
.cs-testimonial {
    padding: 2.5rem;
    border-radius: 12px;
    /* border: 1px solid rgba(116, 150, 211, 0.28); */
    background: linear-gradient(rgb(72 40 207) 55%, rgb(87 219 254) 107%);
    margin: 2rem 0px;
}

.cs-testimonial-quote-icon {
	font-size: 2.8rem;
	color: rgb(255 255 255 / 73%);
	opacity: 1;
	line-height: 1;
	margin-bottom: 1.25rem;
}

.cs-testimonial-text {
	font-size: 1.15rem;
	line-height: 1.85;
	color: #ffffff;
	margin: 0;
	font-style: italic;
}
.cs-testimonial-author{
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #ffffff;
    font-style: italic;
}

.cs-testimonial-author {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: #ffffff;
	font-style: italic;
}


/* ─── CTA Final Blocks (shared base) ────────────────────── */
.cta-final-legal,
.cta-final-education,
.cta-final-logistics,
.cta-final-mid {
	padding: 3.5rem 2rem;
	text-align: center;
	background: linear-gradient(rgb(72 40 207) 55%, rgb(87 219 254) 107%);
	border-radius: 12px;
	/* border: 1px solid rgba(116, 150, 211, 0.28); */
	margin-top: 3rem;
	margin-bottom: 3.5rem;
}

.cta-final-legal h3,
.cta-final-education h3,
.cta-final-logistics h3,
.cta-final-mid h3 {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	margin: 0 0 1rem;
	font-weight: 500;
}

.cta-final-legal p,
.cta-final-education p,
.cta-final-logistics p,
.cta-final-mid p {
	font-size: 1.05rem;
	color: #d0dbf6;
	margin: 0 auto 2rem;
	max-width: 70ch;
}

.cta-final-legal a.btn.btn-primary {
    background: linear-gradient(90deg, #4936d2 0%, #001372 100%);
	border:none;
}

.cta-final-legal .btn,
.cta-final-education .btn,
.cta-final-logistics .btn,
.cta-final-mid .btn {
	border-radius: 999px;
	padding: 0.95rem 2.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
}

/* Logistics CTA uses a custom anchor button */
.cta-final-logistics .btn-cta-primary {
	display: inline-block;
	border-radius: 999px;
	padding: 0.95rem 2.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
	background: linear-gradient(90deg, #0061BC 0%, #001372 100%);
	color: #fff;
	text-decoration: none;
	border: none;
	transition: opacity 0.2s;
}

.cta-final-logistics .btn-cta-primary:hover {
	opacity: 0.88;
	color: #fff;
}


/* ════════════════════════════════════════════════════════════
   PAGE-SPECIFIC COMPONENTS
   ════════════════════════════════════════════════════════════ */


/* ─── Summary Info List (leading-educational) ────────────── */
.cs-summary-list {
	display: grid;
	gap: 0.9rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.cs-summary-list li {
	padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid rgb(117 96 198 / 66%);
    /* background: rgb(117 96 198); */
    color: #000000;
    line-height: 1.65;
    /* background: linear-gradient(135deg, rgb(72, 36, 206) 36%, rgb(117 96 198) 111%);*/
}

.cs-summary-list strong {
    color: #5339b8;
    font-weight: 600;
}


/* ─── Executive Summary Cards (leading-logistics) ────────── */
.cs-exec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0;
}

.cs-exec-card {
    padding: 1.75rem;
    border-radius: 12px;
    border: 1px solid rgb(117 96 198 / 66%);
    /* background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%); */
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.cs-exec-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
}

.cs-exec-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cs-exec-card-label {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: rgb(60, 31, 175);
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.cs-exec-card-value {
    font-size: 0.97rem;
    color: #000000;
    margin: 0;
    line-height: 1.5;
}


/* ─── Client Profile Split Layout (leading-logistics) ───── */
.cs-client-split {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 3.5rem;
	align-items: center;
}

.cs-client-image {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(116, 150, 211, 0.25);
}

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


/* ─── Ordered Problem List (leading-logistics) ───────────── */
.cs-problem-list {
	display: grid;
	gap: 1rem;
	margin: 2rem 0;
	padding-left: 0;
	list-style: none;
}

.cs-problem-list li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%);
	/* border: 1px solid rgba(116, 150, 211, 0.2); */
}

.cs-problem-number {
	    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.cs-highlight i.fas.fa-exclamation-circle {
    color: #ffffff;
    margin-right: 0.75rem;
}
.cs-problem-body h5 {
	font-size: 1.05rem;
	font-weight: 600;
	color: #f4f8ff;
	margin: 0 0 0.3rem;
}

.cs-problem-body p {
	font-size: 0.97rem;
	line-height: 1.7;
	color: #ffffff;
	margin: 0;
}


/* ─── Summary Info Cards (growing-mid-sized) ─────────────── */
.cs-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.2rem;
	margin: 2rem 0;
}

.cs-summary-card {
	padding: 1.75rem;
    border-radius: 12px;
    border: 1px solid rgb(117 96 198 / 66%);
    /* background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%); */
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.cs-summary-card-icon {
	width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgb(72, 36, 206) 0%, rgb(87, 223, 255) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
}

.cs-summary-card-body {
	flex: 1;
}

.cs-summary-card-label {
	font-size: 0.8rem;
	color: rgb(60, 31, 175);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 0.3rem;
}

.cs-summary-card-value {
	font-size: 0.97rem;
	color: #000000;
	margin: 0;
	line-height: 1.5;
}


/* ─── Challenge Cards (growing-mid-sized) ────────────────── */
.cs-challenge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.cs-challenge-card {
	    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgb(117 96 198 / 66%);
    background: transparent;
}

.cs-challenge-number {
	font-size: 2.8rem;
    font-weight: 700;
    color: rgb(60, 31, 175);
    line-height: 1;
    margin-bottom: 0.8rem;
}

.cs-challenge-card h4 {
	font-size: 1.15rem;
	font-weight: 600;
	color: #000000;
	margin: 0 0 0.8rem;
}

.cs-challenge-card p {
	font-size: 0.98rem;
	line-height: 1.7;
	color: #000000;
	margin: 0;
}


/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
	.cs-content-section {
		padding: 2rem 0;
	}

	.cs-solution-steps,
	.cs-exec-grid,
	.cs-challenge-grid {
		grid-template-columns: 1fr;
	}

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

	.cs-client-image {
		order: -1;
	}

	.cs-metric-card {
		padding: 1.5rem;
	}

	.cs-highlight {
		padding: 1.25rem 1.5rem;
	}

	.cs-testimonial {
		padding: 1.75rem;
	}

	.cta-final-legal,
	.cta-final-education,
	.cta-final-logistics,
	.cta-final-mid {
		padding: 2.5rem 1.25rem;
	}
}


/* new custom styles */
.cs-section-title{
	color:#000;
}
.cs-header-content h3 {
    font-size: 1.5rem;
    color: rgb(60, 31, 175);
    margin-top: 1.5rem;
    line-height: 1.6;
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}