/* ============================================================
   CASE-STUDY.CSS
   "Building Digital Lending Infrastructure with Tech Mahindra Finance"
   — White sticky header, dark banner, two-column article + sidebar layout.

   FIGMA REFERENCES
   ┌─────────────────────────────────────────────────────────┐
   │  Header   node 3355-12104  (scrolled-white, always)     │
   │  Banner   node 3355-12144  bg #1f1f1f  px-118  py-76    │
   │  Sidebar  node 3355-12153  w≈304px  gap-[30px]          │
   │  Article  node 3355-12251  flex:1                        │
   └─────────────────────────────────────────────────────────┘
   ============================================================ */


/* ------------------------------------------------------------
   1. HEADER OVERRIDE
   The case study header is always white (no hero card behind it).
   JS adds is-pinned → instantly applies is-scrolled permanently.
   Override position: fixed → sticky so the header flows with page.
   Figma: rounded-[16px] on ALL four corners (not just bottom).
   ------------------------------------------------------------ */
body.page--case-study .site-header.is-scrolled {
  position: sticky;
  top: 0;
  animation: none;                    /* suppress slide-in on page load */
  border-radius: var(--radius-md);    /* 16px all corners — Figma exact */
}

body.page--case-study .site-header.is-scrolled.is-stuck {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}


/* ------------------------------------------------------------
   2. TOP BANNER
   Figma: bg-[#1f1f1f] rounded-[24px] px-[118px] py-[76px]
          breadcrumb: Manrope Medium 16.33px #9b9b9b
          title: Sora Regular 50px lh-58.326 tracking -1.555 white
   ------------------------------------------------------------ */
.cs-banner {
  margin-top: 32px;
}

.cs-banner__inner {
  background: #1f1f1f;
  border-radius: 24px;
  padding: 76px 118px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

/* Decorative right-side image — hand + house + phone
   Figma: ml-255px in ~1380px container → starts ~23% from left
   Image element: 1061×400px (natural), positioned to cover right ~77% of banner */
.cs-banner__visual {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 1061/1380 ≈ 77% of full banner width */
  width: 77%;
  height: 140%;          /* taller than banner — overflow:hidden clips top/bottom */
  pointer-events: none;
}

.cs-banner__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;  /* anchor the composition to the right edge */
  max-width: none;
}

/* Client logo — Mahindra Finance
   Figma: ml-1068px mt-208.5px in a right-aligned 1316px grid inside 1380px banner
   Effective position: right ~130px, vertically ~38% down the banner */
.cs-banner__client-logo {
  position: absolute;
  top: 38%;
  right: 130px;
  height: 36px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.cs-banner__page-header {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Figma text block: 958px wide — keep ample width so 3-line heading fits */
  max-width: 600px;
  position: relative;
  z-index: 1;
}

.cs-banner__breadcrumb {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16.333px;
  line-height: 35px;
  color: #9b9b9b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.cs-banner__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 50px;
  line-height: 58.326px;
  letter-spacing: -1.5554px;
  color: #ffffff;
  margin: 0;
}


/* ------------------------------------------------------------
   3. MAIN LAYOUT  (two columns: article + sidebar)
   ------------------------------------------------------------ */
.cs-main {
  margin-top: 40px;
  margin-bottom: 60px;
}

.cs-main__inner {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.cs-article {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-sidebar {
  flex: 0 0 304px;
  width: 304px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky;
  top: 80px;              /* offset below sticky header */
  align-self: flex-start;
}


/* ------------------------------------------------------------
   4. ARTICLE — SOLUTION INTRO
   Figma: title 60px Sora tracking-[-3px] + body 16px Manrope
   ------------------------------------------------------------ */
.cs-article__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-article__big-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -3px;
  color: #111111;
  margin: 0;
}

.cs-article__lead {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}


/* ------------------------------------------------------------
   5. ARTICLE — SOLUTION IMAGES
   Figma: two equal-flex images, h=319px, rounded-[25px], gap-24
   ------------------------------------------------------------ */
.cs-article__images {
  display: flex;
  gap: 24px;
  align-items: center;
}

.cs-article__image {
  flex: 1 0 0;
  height: 319px;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  background: #edeff0;
}

.cs-article__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
}


/* ------------------------------------------------------------
   6. ARTICLE — SECTION HEADINGS (40px, shared across multiple)
   ------------------------------------------------------------ */
.cs-section-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -2px;
  color: #111111;
  margin: 0;
}


/* ------------------------------------------------------------
   7. ARTICLE — THE SOLUTION
   ------------------------------------------------------------ */
.cs-solution {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-solution__details {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cs-solution__info {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.cs-solution__text {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 24px;
  color: #333333;
  margin: 0;
}

.cs-solution__closing {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}


/* ------------------------------------------------------------
   8. BULLET LIST  (solution steps, outcomes, engagement points)
   Figma: bullet icon 6×9px, text Manrope Bold/Medium 16px lh-30
   ------------------------------------------------------------ */
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-list__item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cs-list__bullet {
  width: 6px;
  height: 9px;
  flex-shrink: 0;
  display: block;
}

.cs-list__text {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  flex: 1;
}

.cs-list__text--medium {
  font-weight: var(--fw-medium);
}


/* ------------------------------------------------------------
   9. ARTICLE — CLIENT VOICE BLOCKQUOTE
   Figma: bg-[#f0f2f4] rounded-[20px] pb-54 pl-50 pr-60 pt-90
          blockquote left-padded 79px; vector decoration at left
   ------------------------------------------------------------ */
.cs-client-voice {
  background: #f0f2f4;
  border-radius: 20px;
  padding: 90px 60px 54px 50px;
}

.cs-client-voice__blockquote {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  padding-left: 79px;
  position: relative;
}

.cs-client-voice__label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 33px;
  color: #000000;
  margin: 0;
}

.cs-client-voice__quote {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 25px;
  line-height: 35px;
  color: #111111;
  margin: 0;
}

/* Quote mark vector — Figma: absolute left-[14px] top-[0.06px]
   Container: 41.84 × 36px, scaleY(-1) on inner content.
   Sits left of the "Client Voice" label inside the pl-79px blockquote. */
.cs-client-voice__vector {
  position: absolute;
  left: 14px;
  top: 0;
  width: 41.84px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Flip the SVG vertically (Figma: -scale-y-100) and lock to exact size */
.cs-client-voice__vector img {
  display: block;
  width: 41.84px;
  height: 36px;
  max-width: none;
  flex-shrink: 0;
  transform: scaleY(-1);
}

.cs-client-voice__attribution {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 35px;
  color: #9b9b9b;
  margin: 0;
}


/* ------------------------------------------------------------
   10. ARTICLE — KEY OUTCOMES
   ------------------------------------------------------------ */
.cs-key-outcomes {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-key-outcomes__body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}


/* ------------------------------------------------------------
   11. ARTICLE — FEATURE DEEP DIVE
   Figma: 3 features side-by-side, each: figure 310×250 + text
   ------------------------------------------------------------ */
.cs-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-features__grid {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.cs-feature-card {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Figma: white rectangle 310×250 rounded-[20px] */
.cs-feature-card__figure {
  width: 100%;
  height: 250px;
  background: #ffffff;
  border-radius: 20px;
  border: 0.75px solid #e0e0e0;
  flex-shrink: 0;
}

.cs-feature-card__text {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}

.cs-feature-card__text strong {
  font-weight: var(--fw-bold);
  display: block;
}


/* ------------------------------------------------------------
   12. ARTICLE — ENGAGEMENT MODEL
   ------------------------------------------------------------ */
.cs-engagement {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-engagement__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-engagement__lead {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}


/* ------------------------------------------------------------
   13. ARTICLE — WHY IT WORKED
   ------------------------------------------------------------ */
.cs-why {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
}

.cs-why__text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 30px;
  color: #333333;
  margin: 0;
}


/* ============================================================
   14. SIDEBAR — CLIENT INFO CARD
   Figma: bg-[#1f1f1f] rounded-[24px] pt-18 pb-80 px-17
          gap-[40px] between logo, client, industry, offering
   ============================================================ */
.cs-client-card {
  background: #1f1f1f;
  border-radius: 24px;
  padding: 18px 17px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Logo area: light grey pill container */
.cs-client-card__logo-area {
  background: #c2c2c2;
  border-radius: 24px;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cs-client-card__logo {
  width: 157px;
  height: 49px;
  object-fit: contain;
  display: block;
  max-width: none;
}

/* Client / Industry / Offering rows */
.cs-client-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-client-info__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 14px;
  line-height: 30px;
  color: #9b9b9b;
  margin: 0;
}

/* Client name is larger */
.cs-client-info__value--name {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 25px;
  line-height: 37.5px;
  letter-spacing: -0.75px;
  color: #ffffff;
  margin: 0;
}

.cs-client-info__value {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  margin: 0;
}

/* Group multiple info rows together */
.cs-client-card__info-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ============================================================
   15. SIDEBAR — SERVICE CARDS
   Figma card 2 (AI):    h-[352px]  bg-[#021326]  rounded-[20px]
   Figma card 3 (Cloud): h-[253px]  bg-[#16263f]  rounded-[23px]
   ============================================================ */
.cs-service-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.cs-service-card--ai {
  height: 352px;
}

.cs-service-card--cloud {
  height: 253px;
}

/* ── Background layer ── */
.cs-service-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cs-service-card--ai .cs-service-card__bg {
  background: #021326;
}

.cs-service-card--cloud .cs-service-card__bg {
  background: #16263f;
}

/* Overlay background image */
.cs-service-card__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.cs-service-card--cloud .cs-service-card__bg-img {
  opacity: 0.5;
}

/* Binary texture overlay (AI card) */
.cs-service-card__binary {
  position: absolute;
  inset: -155% -64% -19% -15%;
  mix-blend-mode: difference;
  opacity: 0.3;
  overflow: hidden;
  pointer-events: none;
}

.cs-service-card__binary img {
  position: absolute;
  left: -7.7%;
  top: -8.05%;
  width: 113.87%;
  height: 113.87%;
  object-fit: cover;
  max-width: none;
}

/* Wave bg image (Cloud card) */
.cs-service-card__wave {
  position: absolute;
  left: -103px;
  top: -6px;
  width: 513px;
  pointer-events: none;
}

/* ── Content area ── */
.cs-service-card__content {
  position: absolute;
  left: 35px;
  top: 19px;
  right: 35px;
  display: flex;
  flex-direction: column;
  gap: 12.5px;
}

/* Cloud card content sits a bit lower */
.cs-service-card--cloud .cs-service-card__content {
  top: 47px;
  left: 33px;
  right: 33px;
}

/* Tags row */
.cs-service-card__tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cs-service-card__tag {
  border: 0.75px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 7.5px;
  line-height: 17px;
  color: #ffffff;
  white-space: nowrap;
}

/* Service title */
.cs-service-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 25px;
  line-height: 26.4px;
  letter-spacing: -0.47px;
  color: #ffffff;
  margin: 0;
}

.cs-service-card--cloud .cs-service-card__title {
  font-size: 29px;
  line-height: 30.6px;
  letter-spacing: -0.55px;
}

/* Description */
.cs-service-card__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11.7px;
  line-height: 15px;
  color: #f0f0f0;
  margin: 0;
}

/* Cloud card description is absolutely positioned lower */
.cs-service-card--cloud .cs-service-card__desc {
  position: absolute;
  top: 114px;
  left: 33px;
  right: 12px;
  font-size: 13.6px;
  line-height: 17.5px;
}

/* Inner image (AI card — bottom-right photo area) */
.cs-service-card__inner-img {
  position: absolute;
  top: 146px;
  left: 99px;
  right: -18px;
  bottom: 18px;
  border-radius: 16px;
  overflow: hidden;
}

.cs-service-card__inner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* ── Arrow trigger button (bottom-right of each service card) ──
   White pill with concave corners + dark circle + arrow icon.
   Shadow color = #f0f2f4 (page background) creates concave cutout.
   ------------------------------------------------------------ */
.cs-service-card__trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65px;
  height: 58px;
  overflow: hidden;
}

/* Top-right concave corner */
.cs-service-card__trigger::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: transparent;
  border-bottom-right-radius: 15px;
  box-shadow: 0 15px 0 0 #f0f2f4;
  pointer-events: none;
}

/* Bottom-left concave corner */
.cs-service-card__trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background: transparent;
  border-bottom-right-radius: 15px;
  box-shadow: 0 15px 0 0 #f0f2f4;
  pointer-events: none;
}

/* White pill */
.cs-service-card__trigger-pill {
  position: absolute;
  left: 15px;
  top: 15px;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-top-left-radius: 22px;
}

/* Dark arrow circle */
.cs-service-card__trigger-circle {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 36px;
  height: 36px;
  background: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease-default);
}

.cs-service-card__trigger-circle:hover {
  background: #111111;
}

.cs-service-card__arrow {
  width: 9.5px;
  height: 9.5px;
  display: block;
  flex-shrink: 0;
  transform: scaleY(-1);
  filter: brightness(0) invert(1);
}


/* ============================================================
   16. RESPONSIVE
   ============================================================ */

/* Narrow desktop */
@media (max-width: 1200px) {
  .cs-banner__inner {
    padding: 60px 60px;
  }

  .cs-banner__title {
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -1.2px;
  }

  .cs-banner__visual {
    width: 65%;
  }

  .cs-banner__client-logo {
    right: 60px;
    top: 36%;
  }

  .cs-article__big-title {
    font-size: 46px;
    line-height: 56px;
  }
}

/* Tablet — stack columns */
@media (max-width: 1024px) {
  .cs-main__inner {
    flex-direction: column;   /* sidebar stacks above article on tablet */
  }

  .cs-sidebar {
    width: 100%;
    flex: 0 0 auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cs-client-card {
    flex: 1 1 280px;
    min-width: 260px;
  }

  .cs-service-card--ai,
  .cs-service-card--cloud {
    flex: 1 1 280px;
    min-width: 260px;
  }

  .cs-banner__inner {
    padding: 48px 40px;
    border-radius: 20px;
  }

  .cs-banner__title {
    font-size: 34px;
    line-height: 44px;
  }

  .cs-banner__visual {
    width: 55%;
    opacity: 0.7;
  }

  .cs-banner__client-logo {
    right: 40px;
    top: auto;
    bottom: 40px;
    height: 28px;
  }

  .cs-banner__page-header {
    max-width: 480px;
  }

  .cs-article__big-title {
    font-size: 38px;
    line-height: 48px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cs-banner__inner {
    padding: 40px 24px;
    border-radius: 16px;
  }

  .cs-banner__title {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -1px;
  }

  .cs-banner__visual {
    width: 65%;
    opacity: 0.35;
  }

  .cs-banner__client-logo {
    right: 20px;
    top: auto;
    bottom: 24px;
    height: 22px;
  }

  .cs-banner__page-header {
    max-width: 100%;
  }

  .cs-main {
    margin-top: 24px;
  }

  .cs-article__big-title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -1.5px;
  }

  .cs-section-heading {
    font-size: 28px;
    line-height: 36px;
  }

  .cs-article__images {
    flex-direction: column;
  }

  .cs-article__image {
    width: 100%;
    height: 220px;
  }

  .cs-features__grid {
    flex-direction: column;
  }

  .cs-client-voice {
    padding: 60px 24px 40px;
  }

  .cs-client-voice__blockquote {
    padding-left: 0;
  }

  .cs-client-voice__vector {
    display: none !important;
  }

  .cs-client-voice__quote {
    font-size: 20px;
  }

  .cs-sidebar {
    flex-direction: column;
  }
}

/* Very small mobile */
@media (max-width: 480px) {
  .cs-client-card,
  .cs-service-card--ai,
  .cs-service-card--cloud {
    flex: 0 0 100%;
    width: 100%;
  }
}