/* Generated by tools/build-rtl-css.mjs from case-studies.css — do not edit; edit case-studies.css and re-run. */
/* /case-studies and /case-studies/{slug} (Views/CaseStudies). Builds on products.css,
   which these pages also load. Arabic gets case-studies.rtl.css (tools/build-rtl-css.mjs).
   Layout follows the marketing team's SEO brief of October 2026: hero with the H1 and the
   photograph, a four-figure stat bar in live text, challenge beside an at-a-glance box,
   approach cards or a dated timeline, an optional before/after table, results with the
   headline figure and the quote, three lessons, the other studies, one closing call. */

.cs .pd-crumbs > div { display: contents; }
.cs .cs-eyebrow p, .cs .cs-row__meta p, .cs .cs-big p, .cs .cs-more__card p { margin: 0; }
.cs-cta__actions > div, .cs-hub .pd-ctas > div { display: contents; }
.cs { --cs-navy: #0e2a3a; --cs-orange: #f6a21e; --cs-orange-ink: #a15c00; --cs-blue: #189fd8; --cs-tint: #e3f4fb; }
.cs .pd-kicker { margin-bottom: 8px; }
.cs-h1 { font: 800 clamp(30px, 3.6vw, 46px)/1.1 Manrope, sans-serif; letter-spacing: -.02em; color: var(--pm-ink); text-wrap: balance; max-width: 24ch; }
.cs-h2 { max-width: 24ch; text-wrap: balance; }
.cs-h2--sm { font: 700 clamp(22px, 2.4vw, 30px)/1.2 Manrope, sans-serif; letter-spacing: -.015em; color: var(--pm-ink); margin-top: 8px !important; }
.cs-sec-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.cs-sec--tight { padding-top: 0; }
.cs-eyebrow { display: flex; flex-wrap: wrap; gap: 10px; font: 700 13px/1.3 Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--cs-orange-ink); }

/* hero */
.cs-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 22px; }
.cs-hero__copy { display: grid; gap: 18px; min-width: 0; }
.cs-hero__intro { font: 400 clamp(16px, 1.4vw, 18.5px)/1.6 Manrope, sans-serif; color: var(--pm-text); max-width: 62ch; text-wrap: pretty; }
.cs-hero__intro a, .cs-prose a, .cs-step__text a, .cs-lesson__text a, .cs-table a { color: var(--pm-brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.cs-hero__brands { display: flex; align-items: center; gap: 16px; margin-top: 4px !important; }
.cs-hero__crest { height: 56px; width: auto; max-width: 180px; object-fit: contain; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line); }
.cs-hero__media { border-radius: 22px; overflow: hidden; box-shadow: 0 40px 60px -40px rgba(12, 15, 44, .45); border-bottom: 4px solid var(--cs-orange); }
.cs-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* the stat bar: real text, never an image */
.cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 44px) !important; }
.cs-stat { display: grid; gap: 6px; align-content: start; padding: 22px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line), 0 18px 36px -30px rgba(12, 15, 44, .4); border-top: 4px solid var(--cs-blue); min-width: 0; }
.cs-stat:nth-child(2n) { border-top-color: var(--cs-orange); }
.cs-stat__value { font: 800 clamp(28px, 2.8vw, 38px)/1 Manrope, sans-serif; letter-spacing: -.02em; color: var(--pm-ink); font-variant-numeric: tabular-nums; }
.cs-stat__label { font: 700 12px/1.35 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-text); }
.cs-stats__note { margin-top: 12px !important; font: 400 14px/1.5 Manrope, sans-serif; color: var(--pm-muted); }

/* prose */
.cs-prose { font: 400 17px/1.7 Manrope, sans-serif; color: var(--pm-text); max-width: 64ch; text-wrap: pretty; }
.cs-prose + .cs-prose { margin-top: 14px !important; }
.cs-split__main .cs-prose:first-of-type { margin-top: 16px !important; }

/* challenge + at a glance */
.cs-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.cs-glance { padding: 24px 26px; border-radius: 16px; background: var(--pm-soft); box-shadow: inset 0 0 0 1px var(--pm-line); border-inline-start: 4px solid var(--cs-blue); min-width: 0; }
.cs-glance__title, .cs-glance dt { font: 700 12px/1.3 Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--pm-brand-deep); }
.cs-glance__title { margin-bottom: 18px !important; }
.cs-glance__list { display: grid; gap: 14px; }
.cs-glance__row { display: grid; gap: 4px; }
.cs-glance dt { color: var(--pm-muted); }
.cs-glance dd { margin: 0; font: 600 15px/1.5 Manrope, sans-serif; color: var(--pm-ink); }

/* approach: cards or a timeline */
.cs-steps { display: grid; gap: 18px; }
@media (min-width: 768px) { .cs-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } }
@media (min-width: 1140px) { .cs-steps--timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cs-step { position: relative; display: grid; align-content: start; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line), 0 18px 36px -30px rgba(12, 15, 44, .35); overflow: hidden; min-width: 0; }
.cs-step__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cs-step__body { display: grid; gap: 8px; padding: 22px; }
.cs-step__n { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--cs-navy); color: #fff; font: 800 14px/1 Manrope, sans-serif; margin-bottom: 6px; }
.cs-step__image + .cs-step__body .cs-step__n { margin-top: -42px; border: 3px solid #fff; box-sizing: content-box; }
.cs-step__when { font: 700 12px/1.3 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-orange-ink); }
.cs-step__title { font: 700 18px/1.3 Manrope, sans-serif; color: var(--pm-ink); }
.cs-step__text { font: 400 15px/1.6 Manrope, sans-serif; color: var(--pm-text); }
.cs-step__link { margin-top: 6px; font: 600 14.5px/1.4 Manrope, sans-serif; color: var(--pm-brand-deep) !important; }
.cs-step__link::after { content: " \2192"; }
.cs-step__link:hover { text-decoration: underline; }

.cs-gallery { display: grid; gap: 18px; }
@media (min-width: 768px) { .cs-gallery { grid-template-columns: 3fr 2fr; } }
.cs-gallery__item { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line); }
.cs-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cs-gallery__item figcaption { padding: 10px 14px; font: 400 13px/1.5 Manrope, sans-serif; color: var(--pm-muted); }

/* before and after */
.cs-table-wrap { overflow-x: auto; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line); }
.cs-table { width: 100%; border-collapse: collapse; font: 400 15px/1.5 Manrope, sans-serif; }
.cs-table th, .cs-table td { padding: 16px 22px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--pm-line); }
.cs-table thead th { font: 700 12px/1.3 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-muted); background: var(--pm-soft); }
.cs-table tbody th { font-weight: 700; color: var(--pm-ink); white-space: nowrap; }
.cs-table tbody tr:last-child th, .cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table__before { color: var(--pm-muted); }
.cs-table__after { color: var(--pm-ink); font-weight: 600; background: var(--cs-tint); }
.cs-table__note { margin-top: 24px !important; }

/* results */
.cs-results { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.cs-results__aside { display: grid; gap: 18px; }
.cs-results__main { display: grid; gap: 14px; min-width: 0; }
.cs-results__media { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line); }
.cs-results__media img { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: cover; }
.cs-big { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 8px; padding: 36px 30px; border-radius: 22px; background: var(--cs-navy); color: #fff; box-shadow: 0 22px 44px -18px rgba(14, 42, 58, .4); }
.cs-big::after { content: ''; position: absolute; inset-inline-end: -18%; bottom: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 14px solid rgba(24, 159, 216, .25); z-index: -1; }
.cs-big__eyebrow { font: 700 12px/1.3 Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #56c1e1; }
.cs-big__value { font: 800 clamp(44px, 5vw, 64px)/1 Manrope, sans-serif; letter-spacing: -.02em; color: var(--cs-orange); font-variant-numeric: tabular-nums; }
.cs-big__label { font: 700 18px/1.3 Manrope, sans-serif; }
.cs-quote { margin-top: 10px !important; display: grid; gap: 18px; padding: 26px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line); border-inline-start: 4px solid var(--cs-orange); }
.cs-quote__text p { font: 500 italic 19px/1.45 Manrope, sans-serif; color: var(--pm-ink); text-wrap: pretty; }
.cs-quote__text p::before { content: '“'; }
.cs-quote__text p::after { content: '”'; }
.cs-quote__by { display: flex; align-items: center; gap: 14px; font: 400 14px/1.4 Manrope, sans-serif; }
.cs-quote__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--cs-tint); }
.cs-quote__photo--crest { border-radius: 8px; object-fit: contain; border: 0; }
.cs-quote__name { display: block; font-weight: 700; color: var(--pm-ink); }
.cs-quote__role { display: block; color: var(--pm-muted); }
.cs-track { display: grid; gap: 10px; padding: 26px 28px; border-radius: 16px; background: var(--pm-soft); box-shadow: inset 0 0 0 1px var(--pm-line); }

/* lessons */
.cs-lessons { display: grid; gap: 24px; }
@media (min-width: 768px) { .cs-lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-lesson { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 3px solid var(--cs-navy); min-width: 0; }
.cs-lesson__n { font: 800 30px/1 Manrope, sans-serif; color: var(--cs-orange); }
.cs-lesson__title { font: 700 18px/1.3 Manrope, sans-serif; color: var(--pm-ink); }
.cs-lesson__text { font: 400 15px/1.6 Manrope, sans-serif; color: var(--pm-text); }

/* the other studies */
.cs-more { display: grid; gap: 18px; }
@media (min-width: 768px) { .cs-more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.cs-more__card { display: grid; gap: 6px; align-content: start; padding: 26px; border-radius: 16px; background: var(--cs-navy); color: #fff; box-shadow: 0 18px 36px -30px rgba(12, 15, 44, .5); transition: transform .2s ease, box-shadow .2s ease; min-width: 0; }
.cs-more__card:nth-child(3n+2) { background: var(--cs-blue); color: var(--cs-navy); }
.cs-more__card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -18px rgba(14, 42, 58, .4); }
.cs-more__org { font: 700 12px/1.3 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cs-more__value { font: 800 clamp(32px, 3.4vw, 44px)/1 Manrope, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs-more__label { font: 600 16px/1.3 Manrope, sans-serif; }
.cs-more__cue { margin-top: 10px; font: 600 14px/1.4 Manrope, sans-serif; opacity: .9; }
.cs-more__cue::after, .cs-row__cue::after { content: " \2192"; }
.cs-more-link { text-align: start; }

/* the closing call: blue into orange, navy type, the PDF beside the demo */
.cs-cta { background: linear-gradient(-100deg, var(--cs-blue) 0%, var(--cs-blue) 45%, var(--cs-orange) 100%); color: var(--cs-navy); padding-block: clamp(40px, 5vw, 64px); }
.cs-cta__inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 960px) { .cs-cta__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.cs-cta__copy { display: grid; gap: 8px; }
.cs-cta__title { font: 800 clamp(26px, 2.8vw, 36px)/1.15 Manrope, sans-serif; letter-spacing: -.02em; color: var(--cs-navy); }
.cs-cta__copy p { font: 400 17px/1.5 Manrope, sans-serif; color: var(--cs-navy); max-width: 60ch; }
.cs-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-cta .cs-cta__pdf { background: #fff; border-color: #fff; color: var(--cs-navy) !important; white-space: normal; text-align: center; }
.cs-cta .cs-cta__demo { background: var(--cs-navy); color: #fff !important; box-shadow: none; }
.cs-cta .cs-cta__demo:hover { background: #18405a; }

/* the hub rows */
.cs-hero--hub .pd-lede { max-width: 70ch; }
.cs-rows { display: grid; gap: 24px; }
.cs-row { display: grid; gap: 22px; padding: 26px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--pm-line), 0 18px 36px -30px rgba(12, 15, 44, .35); position: relative; transition: box-shadow .2s ease, transform .2s ease; }
@media (min-width: 900px) { .cs-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; } }
.cs-row:hover, .cs-row:focus-within { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--pm-brand), 0 22px 44px -28px rgba(12, 15, 44, .5); }
.cs-row__lede { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cs-row__head { display: flex; align-items: center; gap: 16px; }
.cs-row__crest { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.cs-row__org { font: 700 clamp(20px, 2vw, 26px)/1.2 Manrope, sans-serif; letter-spacing: -.015em; color: var(--pm-ink); }
.cs-row__link { color: inherit !important; }
.cs-row__link::after { content: ''; position: absolute; inset: 0; border-radius: 22px; }
.cs-row:hover .cs-row__org { color: var(--pm-brand-deep); }
.cs-row__meta { display: flex; gap: 12px; font: 700 12px/1.3 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-muted); margin-top: 6px !important; }
.cs-row__meta > p + p::before { content: '·'; margin-inline-end: 12px; }
.cs-row__teaser { font: 400 15.5px/1.65 Manrope, sans-serif; color: var(--pm-text); text-wrap: pretty; }
.cs-row__cue { font: 700 13px/1.3 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-brand-deep); }
.cs-row__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-row__metrics .cs-stat { padding: 18px; box-shadow: inset 0 0 0 1px var(--pm-line); }
.cs-row__metrics .cs-stat__value { font-size: 26px; }
.cs-row__metrics .cs-stat__label { text-transform: none; letter-spacing: 0; font: 600 14px/1.35 Manrope, sans-serif; }

@media (max-width: 960px) {
  .cs-hero__grid, .cs-split, .cs-results { grid-template-columns: 1fr; }
  .cs-h1 { max-width: none; }
}
@media (max-width: 640px) {
  .cs-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cs-stat { padding: 16px 14px; }
  .cs-table th, .cs-table td { padding: 12px 14px; }
  .cs-cta__actions .pd-btn { flex: 1 1 auto; }
}