/* ==========================================================================
   Case Study template (template-case-study.php)
   Everything is scoped to .cs-page so it never affects other templates.
   ========================================================================== */
.cs-page { --cs-orange: #ef7022; --cs-orange-light: #f5962e; --cs-gradient: linear-gradient(to right, #ef7022 0%, #f5962e 100%); --cs-dark: #111111; --cs-text: #555555; --cs-border: #c9c9c9; }

.cs-page .cs-section { position: relative; }
.cs-page .cs-inner { padding: 110px 0px; position: relative; }
.cs-page .cs-content p:last-child, .cs-page .cs-content:empty { margin-bottom: 0px; }
.cs-page .cs-content { color: var(--cs-text); font-size: 17px; line-height: 1.5; }
.cs-page .cs-content strong, .cs-page .cs-content b { color: #333333; font-weight: 600; }

/* Titles ------------------------------------------------------------------ */
.cs-page .cs-title { margin-bottom: 40px; }
.cs-page .cs-eyebrow { display: block; color: var(--cs-orange); font-size: 16px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 15px; }
.cs-page .cs-title h2 { font-size: 42px; line-height: 1.12; color: var(--cs-dark); padding-bottom: 0px; }
.cs-page .cs-title h2 span, .cs-page .cs-hero h1 span { color: var(--cs-orange-light); }
.cs-page .cs-title.white h2 { color: #ffffff; }
.cs-page .cs-title-dark h2 { color: #142d49; }
.cs-page .cs-title-dark .cs-eyebrow { color: #111111; }
.cs-page .cs-title-line { padding-top: 45px; position: relative; }
.cs-page .cs-title-line::before { content: ""; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 110px; height: 10px; background: var(--cs-gradient); }

/* Hero -------------------------------------------------------------------- */
.cs-page .cs-hero { background-image: linear-gradient(110deg, #141c3d 0%, #0b0f22 45%, #000000 100%); }
.cs-page .cs-hero.has-bg-image { background-image: none; }
.cs-page .cs-hero-inner { padding: 190px 0px 80px; max-width: 1120px; }
.cs-page .cs-customer { display: flex; align-items: center; gap: 50px; margin-bottom: 100px; }
.cs-page .cs-customer-logo { width: 315px; height: 140px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-page .cs-customer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-page .cs-customer-info span { display: block; font-size: 28px; font-weight: 400; line-height: 1.3; }
.cs-page .cs-customer-info strong { display: block; font-size: 28px; font-weight: 700; line-height: 1.3; padding-top: 10px; }
.cs-page .cs-hero-eyebrow { font-size: 25px; margin-bottom: 30px; }
.cs-page .cs-hero h1 { font-size: 58px; line-height: 1.1; color: #ffffff; padding-bottom: 40px; }
.cs-page .cs-hero-text { font-size: 32px; line-height: 1.4; margin-bottom: 45px; }
.cs-page .cs-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.cs-page .cs-buttons .custom-button { width: auto; min-width: 270px; }
.cs-page .custom-button.cs-button-white { color: var(--cs-orange) !important; clip-path: polygon(13% 0, 100% 0, 87% 100%, 0% 100%);}
.cs-page .custom-button.cs-button-white:hover {color:#fff !important;}
.cs-page .custom-button.cs-button-white::after { background: var(--cs-gradient); color: #ffffff; }

/* Stats bar --------------------------------------------------------------- */
.cs-page .cs-stats-row { padding: 45px 0px; }
.cs-page .cs-stat { text-align: center; color: #ffffff; padding: 15px 20px; height: 100%; }
.cs-page .cs-stats-row > div + div .cs-stat { border-left: 1px solid rgba(255, 255, 255, 0.7); }
.cs-page .cs-stat strong { display: block; font-size:48px; font-weight: 700; line-height: 1.1; color: var(--cs-orange-light); padding-bottom: 15px; }
.cs-page .cs-stat span { display: block; font-size: 17px; }

/* Intro + Challenge -------------------------------------------------------- */
.cs-page .cs-intro-image img { border-radius: 20px; width: 100%; }
.cs-page .cs-slant-image { position: relative; padding-left: 20px; }
.cs-page .cs-slant-image img { width: 100%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); position: relative; z-index: 1; }
/*.cs-page .cs-slant-image::before { content: ""; position: absolute; left: 3%; top: 19%; width: 18%; height: 61%; background: var(--cs-gradient); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); z-index: 2; }*/
.cs-page .cs-points-box { border: 2px solid var(--cs-orange); margin-top: 70px; padding: 60px 30px 50px; position: relative; }
.cs-page .cs-tab-title { position: absolute; top: -2px; left: -2px; transform: translateY(-50%); background: var(--cs-gradient); color: #ffffff; font-size: 26px; line-height: 1; padding: 17px 60px 17px 25px; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); margin: 0px; }
.cs-page .cs-point-icon { height: 50px; margin-bottom: 25px; }
.cs-page .cs-point-icon img { height: 100%; width: auto; }
.cs-page .cs-point h4 { font-size: 20px; color: #555555; padding-bottom: 8px; font-weight: 600; }
.cs-page .cs-point p { font-size: 17px; color: var(--cs-text); margin-bottom: 0px; }
/* 5-6 points in one row: narrower columns, so slightly smaller text */
.cs-page .cs-points-compact .cs-point h4 { font-size: 18px; }
.cs-page .cs-points-compact .cs-point p { font-size: 15px; }

/* Cards with orange slanted icon badge (Why AWS + Architecture) ------------ */
.cs-page .cs-badge { position: absolute; width: 120px; height: 90px; /* clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); */ display: flex; align-items: center; justify-content: center; }
/*.cs-page .cs-badge img { max-width: 60px; max-height: 60px; }*/
.cs-page .cs-card { position: relative; border: 1px solid var(--cs-border); padding: 35px 105px 30px 30px; height: 100%; min-height: 155px; }
.cs-page .cs-card h3 { font-size: 28px; font-weight: 500; color: var(--cs-dark); padding-bottom: 10px; }
.cs-page .cs-card p { font-size: 17px; color: var(--cs-text); margin-bottom: 0px; }
.cs-page .cs-card .cs-badge { right: -15px; bottom: -15px; }

/* Outcome ------------------------------------------------------------------ */
.cs-page .cs-results { border-top: 1px solid rgba(255, 255, 255, 0.6); border-left: 1px solid rgba(255, 255, 255, 0.6); }
.cs-page .cs-result { background: rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding: 35px 40px; height: 100%; color: #ffffff; }
.cs-page .cs-result strong { display: block; font-size: 40px; line-height: 1.2; color: var(--cs-orange-light); padding-bottom: 20px; }
.cs-page .cs-result p { font-size: 17px; margin-bottom: 0px; }

/* Partner ------------------------------------------------------------------ */
.cs-page .cs-partner-card { position: relative; border: 1px solid #555555; padding: 70px 30px 30px; margin-top: 30px; }
.cs-page .cs-partner-card .cs-tab-title { font-size: 36px; padding: 13px 70px 13px 25px; }
.cs-page .cs-partner-subtitle { font-size: 17px; color: #111111; margin-bottom: 20px; }
.cs-page .cs-tags { display: flex; flex-wrap: wrap; gap: 15px; list-style: none; padding: 0px; margin: 30px 0px 0px; }
.cs-page .cs-tags li { background: #f3f2ee; font-size: 17px; font-weight: 600; color: #333333; padding: 12px 45px 12px 22px; clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); }

/* Architecture ------------------------------------------------------------- */
.cs-page .cs-arch .cs-title { margin-bottom: 20px; }
.cs-page .cs-arch-text { text-align: center; font-weight: 600; color: #111111; max-width: 830px; margin: 0px auto 40px; }
.cs-page .cs-arch-grid { border-top: 1px solid #333333; border-left: 1px solid #333333; }
.cs-page .cs-arch-item { position: relative; background: rgba(255, 255, 255, 0.85); border-right: 1px solid #333333; border-bottom: 1px solid #333333; padding: 40px 40px 150px; height: 100%; overflow: hidden; }
.cs-page .cs-arch-item h3 { font-size: 28px; font-weight: 500; color: var(--cs-dark); padding-bottom: 12px; }
.cs-page .cs-arch-item p { font-size: 17px; color: var(--cs-text); margin-bottom: 0px; }
.cs-page .cs-arch-item .cs-badge { left: 0px; bottom: 0px; height: 120px; clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }

/* Business impact ---------------------------------------------------------- */
.cs-page .cs-impact-item { display: flex; border: 1px solid #333333; background: #f3f2ee; height: 100%; }
.cs-page .cs-impact-image { width: 43%; flex-shrink: 0; padding-bottom: 0px; height: auto; min-height: 215px; }
.cs-page .cs-impact-info { padding: 30px; align-self: center; }
.cs-page .cs-impact-info h3 { font-size: 24px; line-height: 1.45; color: #333333; padding-bottom: 12px; }
.cs-page .cs-impact-info p { font-size: 17px; color: #111111; margin-bottom: 0px; }

/* Testimonials ------------------------------------------------------------- */
.cs-page .cs-testimonial .cs-inner { padding: 50px 0px 90px; }
.cs-page .cs-testimonial-box { display: flex; align-items: center; background: rgba(255, 255, 255, 0.04); margin: 55px 30px 0px; position: relative; min-height: 305px; }
.cs-page .cs-testimonial-photo { width: 370px; flex-shrink: 0; align-self: stretch; position: relative; margin-left: 20px; }
.cs-page .cs-testimonial-photo img { position: absolute; left: 0px; bottom: 0px; width: 100%; height: calc(100% + 55px); object-fit: cover; clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
.cs-page .cs-testimonial-info { padding: 40px 45px 40px 30px; }
.cs-page .cs-rating { display: flex; align-items: center; gap: 15px; color: var(--cs-orange-light); margin-bottom: 25px; }
.cs-page .cs-stars { color: #ffffff; font-size: 24px; letter-spacing: 2px; }
.cs-page .cs-testimonial blockquote { font-size: 17px; margin: 0px 0px 25px; padding: 0px; border: none; }
.cs-page .cs-testimonial h4 { font-size: 24px; color: var(--cs-orange-light); padding-bottom: 0px; }
.cs-page .cs-position { color: var(--cs-orange-light); margin-bottom: 0px; }
.cs-page .cs-pager { display: flex; justify-content: center; align-items: center; gap: 30px; padding-top: 45px; }
.cs-page .cs-pager-pages { display: flex; gap: 25px; list-style: none; padding: 0px; margin: 0px; }
.cs-page .cs-pager-pages button { background: none; border: none; padding: 0px; color: #ffffff; font-weight: 700; font-size: 18px; cursor: pointer; }
.cs-page .cs-pager-pages .active button { color: var(--cs-orange-light); }
.cs-page .cs-pager-pages .dots { color: #ffffff; }
.cs-page .cs-pager a { color: #ffffff; text-decoration: none; }
.cs-page .cs-pager a:hover { color: var(--cs-orange-light); }
.cs-page .cs-pager a::after { content: ">"; }
.cs-page .cs-pager:has(.cs-pager-pages:empty):not(:has(a)) { display: none; }

/* CTA ---------------------------------------------------------------------- */
.cs-page .cs-cta .cs-inner { padding: 190px 0px; max-width: 680px; margin: 0px auto; }
.cs-page .cs-cta h2 { font-size: 52px; color: var(--cs-dark); padding-bottom: 25px; }
.cs-page .cs-cta p { font-size: 17px; color: #111111; margin-bottom: 40px; }
.cs-page .cs-cta .custom-button { width: auto; min-width: 345px; text-decoration: underline !important; clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);}

/* Responsive (same breakpoints as css/responsive.css) ---------------------- */
@media only screen and (max-width: 1399.98px) {
    .cs-page .cs-inner { padding: 90px 0px; }
    .cs-page .cs-title h2, .cs-page .cs-cta h2 { font-size: 32px; }
    .cs-page .cs-hero h1 { font-size: 48px; }
    .cs-page .cs-hero-text { font-size: 24px; }
    .cs-page .cs-stat strong { font-size: 38px; }
    .cs-page .cs-testimonial-photo { width: 300px; }
    .cs-page .cs-eyebrow, .cs-page .cs-tags li {font-size:14px;}
    .cs-page .cs-point h4 {font-size:18px;}
    .cs-page .cs-point p, .cs-page .cs-impact-info p {font-size:15px;}
    .cs-page .cs-card h3 {font-size:25px;}
    .cs-page .cs-arch-item h3 {font-size:25px;}
    .cs-page .cs-partner-card .cs-tab-title {font-size:32px;}
    .cs-page .cs-arch-item .cs-badge {height:90px;}
    .cs-page .cs-arch-item {padding: 40px 40px 130px;}
    .cs-page .cs-impact-info h3 {font-size: 20px;line-height: 1.25;}
}

@media only screen and (max-width: 991.98px) {
    .cs-page .cs-inner { padding: 70px 0px; }
    .cs-page .cs-title h2, .cs-page .cs-cta h2 { font-size: 34px; }
    .cs-page .cs-hero-inner { padding: 150px 0px 60px; }
    .cs-page .cs-customer { margin-bottom: 60px; gap: 30px; }
    .cs-page .cs-hero h1 { font-size: 40px; }
    .cs-page .cs-hero-text { font-size: 20px; }
    .cs-page .cs-stats-row > div:nth-child(3) .cs-stat { border-left: none; }
    .cs-page .cs-stats-row > div:nth-child(n+3) .cs-stat { padding-top: 30px; }
    .cs-page .cs-slant-image { margin-top: 20px; }
    .cs-page .cs-impact-info h3 { font-size: 22px; }
    .cs-page .cs-testimonial-box { flex-direction: column; margin: 0px; }
    .cs-page .cs-testimonial-photo { width: 260px; height: 300px; margin: 0px auto; }
    .cs-page .cs-testimonial-photo img { height: 100%; }
    .cs-page .cs-cta .cs-inner { padding: 120px 0px; }
}

@media only screen and (max-width: 767.98px) {
    .cs-page .cs-title h2, .cs-page .cs-cta h2 { font-size: 30px; }
    .cs-page .cs-eyebrow { font-size: 14px; letter-spacing: 3px; }
    .cs-page .cs-customer { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
    .cs-page .cs-customer-logo { width: 220px; height: 100px; }
    .cs-page .cs-customer-info span, .cs-page .cs-customer-info strong { font-size: 22px; }
    .cs-page .cs-hero-eyebrow { font-size: 18px; }
    .cs-page .cs-hero h1 { font-size: 32px; padding-bottom: 25px; }
    .cs-page .cs-hero-text { font-size: 18px; }
    .cs-page .cs-buttons .custom-button { min-width: 0px; width: 100%; }
    .cs-page .cs-stat strong { font-size: 38px; }
    .cs-page .cs-stat span { font-size: 15px; }
    .cs-page .cs-points-box { padding: 60px 15px 30px; }
    .cs-page .cs-tab-title { font-size: 20px; padding-right: 45px; }
    .cs-page .cs-partner-card .cs-tab-title { font-size: 26px; }
    .cs-page .cs-card { padding-right: 30px; padding-bottom: 100px; }
    .cs-page .cs-card h3, .cs-page .cs-arch-item h3 { font-size: 22px; }
    .cs-page .cs-result { padding: 30px 25px; }
    .cs-page .cs-impact-item { flex-direction: column; }
    .cs-page .cs-impact-image { width: 100%; min-height: 220px; }
    .cs-page .cs-testimonial-info { padding: 30px 20px; }
    .cs-page .cs-pager { flex-wrap: wrap; gap: 15px; }
    .cs-page .cs-pager-pages { gap: 18px; }
    .cs-page .cs-cta .custom-button { min-width: 0px; width: 100%; }
}

.white {color:#ffffff!important;}