/* ==========================================================================
   Client Success case study template — Opal Infotech blog
   Enqueue after the theme stylesheet (see README.md).
   Scoped under .cs-page so nothing leaks into other blog templates.

   Every selector is prefixed with .cs-page (doubling specificity) and every
   declaration carries !important. This theme's own stylesheets use
   !important extensively (100+ times across style.css/opalnew.css/custom.css),
   so without this hardening, generic theme/plugin rules loaded later in the
   cascade win over unscoped .cs-* rules and the layout breaks (badges render
   as circles, the sticky TOC overlaps content, text falls back to default
   sizes). This is a defensive measure for embedding a self-contained
   component stylesheet inside a legacy theme, not a sign of bad CSS design.
   ========================================================================== */
#primary, #main { float: none !important; width: 100% !important; display: block !important; }
/* .site-header is float:left (theme-wide, not scoped to mobile) with no matching
   clear on #content, so #content silently overlaps it — invisible on ordinary white-
   on-white pages, but it hides the logo/phone numbers under our own white background
   and creates a blank-looking gap above our dark banner. Only needed here since this
   stylesheet only loads on this template's pages. */
#content { clear: both !important; }
.cs-page{--cs-ink: #0f1720;--cs-body: #45525e;--cs-muted: #5b6773;--cs-soft: #7d8892;--cs-line: #e3e7ea;--cs-line-2: #eceff1;--cs-panel: #f7f8f9;--cs-accent: #e2621b;--cs-accent-dark: #c8551a;--cs-accent-soft: #fdf1ea;--cs-accent-border: #f3d6c4;--cs-bar: #c9d1d7;--cs-display: 'Sora', 'Segoe UI', sans-serif;--cs-text: 'Source Sans 3', system-ui, sans-serif;--op-navy: #0b1f33;--op-primary-dark: #0d47a1;--cs-head-bg: linear-gradient(160deg, var(--op-navy) 0%, var(--op-primary-dark) 130%);display: block !important;font-family: var(--cs-text) !important;color: var(--cs-ink) !important;font-size: 17px !important;line-height: 1.65 !important;text-wrap: pretty !important;background: #fff !important;padding: 0 !important;}.cs-page.page-header, .cs-page .page-header, .cs-page.page-content, .cs-page .page-content{padding: 0 !important;}.cs-page .cs-shell{max-width: 1200px !important;margin: 0 auto !important;padding: 0 24px !important;}.cs-page .cs-crumbs{display: flex !important;align-items: center !important;gap: 10px !important;flex-wrap: wrap !important;font-size: 13px !important;color: #98a3ac !important;margin: 0 !important;background: var(--cs-head-bg) !important;width: 100vw !important;margin-left: calc(50% - 50vw) !important;margin-right: calc(50% - 50vw) !important;box-sizing: border-box !important;padding: 20px max(24px, calc(50% - 600px)) 0 !important;}.cs-page .cs-crumbs a{color: #c7ced4 !important;text-decoration: none !important;}.cs-page .cs-crumbs a:hover{color: #fff !important;}.cs-page .cs-crumbs__current{color: #fff !important;font-weight: 600 !important;}.cs-page .cs-crumbs span{color: #4c5760 !important;}.cs-page .cs-head{background: var(--cs-head-bg) !important;border-bottom: none !important;margin: 0 0 44px !important;padding: 0 !important;width: 100vw !important;margin-left: calc(50% - 50vw) !important;margin-right: calc(50% - 50vw) !important;box-sizing: border-box !important;}.cs-page .cs-head__inner{max-width: 1200px !important;margin: 0 auto !important;padding: 56px 24px !important;box-sizing: border-box !important;}.cs-page .cs-head .cs-title{color: #fff !important;}.cs-page .cs-head .cs-deck{color: #c7ced4 !important;}.cs-page .cs-head .cs-byline{color: #98a3ac !important;}.cs-page .cs-head .cs-byline strong{color: #fff !important;}.cs-page .cs-head .cs-sep{color: #4c5760 !important;}.cs-page .cs-head .cs-eyebrow{background: rgba(255, 255, 255, 0.1) !important;color: #fff !important;border-color: rgba(255, 255, 255, 0.22) !important;}.cs-page .cs-head__cta{margin-top: 28px !important;}.cs-page .cs-eyebrow{display: inline-flex !important;align-items: center !important;gap: 8px !important;margin: 0 !important;background: var(--cs-accent-soft) !important;color: var(--cs-accent-dark) !important;border: 1px solid var(--cs-accent-border) !important;border-radius: 100px !important;padding: 6px 14px !important;font-family: var(--cs-display) !important;font-size: 11.5px !important;font-weight: 600 !important;letter-spacing: 0.14em !important;text-transform: uppercase !important;}.cs-page .cs-eyebrow span{width: 6px !important;height: 6px !important;border-radius: 50% !important;background: var(--cs-accent) !important;display: block !important;}.cs-page .cs-title{float: none !important;width: auto !important;padding: 0 !important;font-family: var(--cs-display) !important;font-weight: 600 !important;font-size: clamp(32px, 4.4vw, 52px) !important;line-height: 1.12 !important;letter-spacing: -0.02em !important;margin: 20px 0 0 !important;}.cs-page .cs-deck{font-size: clamp(18px, 2vw, 21px) !important;color: var(--cs-body) !important;margin: 16px 0 0 !important;}.cs-page .cs-byline{display: flex !important;flex-wrap: wrap !important;gap: 8px 22px !important;margin-top: 26px !important;font-size: 14.5px !important;color: var(--cs-muted) !important;}.cs-page .cs-byline strong{color: var(--cs-ink) !important;font-weight: 600 !important;}.cs-page .cs-sep{color: #d5dbe0 !important;}.cs-page .cs-resultsbar{background: var(--cs-ink) !important;color: #fff !important;border-radius: 4px !important;display: grid !important;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;gap: 1px !important;overflow: hidden !important;margin-bottom: 44px !important;box-shadow: 0 10px 30px -18px rgba(15, 23, 32, 0.6) !important;box-sizing: border-box !important;width: 100% !important;}.cs-page .cs-resultsbar__item{padding: 16px 20px !important;background: var(--cs-ink) !important;}.cs-page .cs-resultsbar__label{font-family: var(--cs-display) !important;font-size: 11px !important;letter-spacing: 0.12em !important;text-transform: uppercase !important;color: #8f9ba6 !important;}.cs-page .cs-resultsbar__value{font-family: var(--cs-display) !important;font-size: 22px !important;font-weight: 600 !important;margin-top: 4px !important;}.cs-page .cs-resultsbar__value span, .cs-page .cs-resultsbar__value .up{color: #f0873f !important;}.cs-page .cs-grid{display: grid !important;width: 100% !important;grid-template-columns: minmax(0, 1fr) 260px !important;gap: 56px !important;align-items: start !important;padding-bottom: 40px !important;}.cs-page .cs-grid--full{grid-template-columns: minmax(0, 1fr) !important;}.cs-page .cs-main{min-width: 0 !important;}.cs-page .cs-facts{display: grid !important;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;border: 1px solid var(--cs-line) !important;border-radius: 6px !important;overflow: hidden !important;margin-bottom: 48px !important;}.cs-page .cs-facts__cell{padding: 20px 22px !important;border-right: 1px solid var(--cs-line) !important;}.cs-page .cs-facts__cell:last-child{border-right: 0 !important;}.cs-page .cs-facts__label{font-family: var(--cs-display) !important;font-size: 11px !important;letter-spacing: 0.12em !important;text-transform: uppercase !important;color: var(--cs-soft) !important;}.cs-page .cs-facts__value{margin-top: 6px !important;font-weight: 600 !important;}.cs-page .cs-facts__note{color: var(--cs-muted) !important;font-size: 15px !important;}.cs-page .cs-body > h2, .cs-page .cs-section > h2{font-family: var(--cs-display) !important;font-weight: 600 !important;font-size: 30px !important;letter-spacing: -0.01em !important;margin: 56px 0 6px !important;scroll-margin-top: 90px !important;}.cs-page .cs-body > h2::after, .cs-page .cs-section > h2::after{content: '' !important;display: block !important;width: 44px !important;height: 3px !important;background: var(--cs-accent) !important;margin: 12px 0 26px !important;}.cs-page .cs-body > h3{font-family: var(--cs-display) !important;font-size: 22px !important;font-weight: 600 !important;margin: 34px 0 12px !important;}.cs-page .cs-body > h4{font-family: var(--cs-display) !important;font-size: 18px !important;font-weight: 600 !important;margin: 26px 0 8px !important;}.cs-page .cs-body p{margin: 0 0 18px !important;}.cs-page .cs-body a{color: var(--cs-accent-dark) !important;}.cs-page .cs-body ul, .cs-page .cs-body ol{margin: 0 0 22px !important;padding-left: 22px !important;color: var(--cs-body) !important;}.cs-page .cs-body li{margin-bottom: 8px !important;}.cs-page .cs-body img{max-width: 100% !important;height: auto !important;border-radius: 6px !important;}.cs-page .cs-body figure{margin: 0 0 34px !important;border: 1px solid var(--cs-line) !important;border-radius: 6px !important;padding: 26px !important;}.cs-page .cs-body figcaption{margin-top: 18px !important;padding-top: 14px !important;border-top: 1px solid var(--cs-line-2) !important;font-size: 14px !important;color: var(--cs-soft) !important;}.cs-page .cs-body blockquote{margin: 0 0 24px !important;padding: 24px 28px !important;background: var(--cs-panel) !important;border-radius: 6px !important;font-family: var(--cs-display) !important;font-size: 20px !important;line-height: 1.5 !important;font-weight: 500 !important;color: var(--cs-ink) !important;}.cs-page .cs-note{border-left: 3px solid var(--cs-accent) !important;background: #fdf9f6 !important;padding: 20px 24px !important;margin: 0 0 32px !important;}.cs-page .cs-note p:last-child{margin-bottom: 0 !important;}.cs-page .cs-body table{width: 100% !important;border-collapse: collapse !important;font-size: 16px !important;margin: 0 0 26px !important;table-layout: auto !important;}.cs-page .cs-body table:not(:has(thead)) td:first-child{width: 200px !important;}.cs-page .cs-body table:not(:has(thead)) td + td{text-align: left !important;}.cs-page .cs-body table thead th{text-align: left !important;padding: 12px 14px !important;background: var(--cs-ink) !important;color: #fff !important;font-family: var(--cs-display) !important;font-size: 13px !important;letter-spacing: 0.06em !important;text-transform: uppercase !important;font-weight: 600 !important;}.cs-page .cs-body table thead th + th{text-align: right !important;}.cs-page .cs-body table td{padding: 13px 14px !important;border-bottom: 1px solid var(--cs-line) !important;}.cs-page .cs-body table td + td{text-align: right !important;}.cs-page .cs-body table tbody tr:nth-child(even){background: #fafbfb !important;}.cs-page .cs-body table td strong, .cs-page .cs-body table .cs-delta{color: var(--cs-accent-dark) !important;font-weight: 600 !important;}.cs-page .cs-scroll{overflow-x: auto !important;}.cs-page .cs-scroll table{min-width: 520px !important;}.cs-page .cs-chart{border: 1px solid var(--cs-line) !important;border-radius: 6px !important;padding: 26px !important;margin: 0 0 34px !important;}.cs-page .cs-chart__legend{display: flex !important;gap: 20px !important;align-items: center !important;margin-bottom: 22px !important;font-size: 14px !important;color: var(--cs-muted) !important;}.cs-page .cs-chart__legend span{display: inline-flex !important;align-items: center !important;gap: 8px !important;}.cs-page .cs-chart__legend i{width: 12px !important;height: 12px !important;border-radius: 2px !important;background: var(--cs-bar) !important;}.cs-page .cs-chart__legend .is-after i{background: var(--cs-accent) !important;}.cs-page .cs-chart__split{display: flex !important;align-items: flex-end !important;gap: 34px !important;}.cs-page .cs-chart__panel{background: #fafbfb !important;border: 1px solid var(--cs-line-2) !important;border-radius: 6px !important;padding: 20px 22px !important;}.cs-page .cs-chart__caption{margin-top: 20px !important;padding-top: 14px !important;border-top: 1px solid var(--cs-line-2) !important;font-size: 14px !important;color: var(--cs-soft) !important;}.cs-page .cs-bars{display: grid !important;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;gap: 30px 26px !important;align-items: end !important;}.cs-page .cs-bars__group{display: flex !important;flex-direction: column !important;justify-content: flex-end !important;}.cs-page .cs-bars__pair{display: flex !important;align-items: flex-end !important;gap: 8px !important;height: 190px !important;}.cs-page .cs-bars__bar{flex: 1 !important;background: var(--cs-bar) !important;border-radius: 3px 3px 0 0 !important;position: relative !important;}.cs-page .cs-bars__bar.is-after{background: var(--cs-accent) !important;}.cs-page .cs-bars__bar span{position: absolute !important;top: -22px !important;left: 0 !important;font-family: var(--cs-display) !important;font-size: 13.5px !important;color: var(--cs-muted) !important;white-space: nowrap !important;}.cs-page .cs-bars__bar.is-after span{color: var(--cs-accent-dark) !important;font-weight: 600 !important;}.cs-page .cs-bars__label{margin-top: 10px !important;font-size: 14.5px !important;font-weight: 600 !important;}.cs-page .cs-bars__label em{font-style: normal !important;color: var(--cs-accent-dark) !important;}.cs-page .cs-hbars{display: grid !important;gap: 18px !important;}.cs-page .cs-hbars__row{display: grid !important;grid-template-columns: 130px minmax(0, 1fr) 108px !important;gap: 16px !important;align-items: center !important;}.cs-page .cs-hbars__name{font-weight: 600 !important;font-size: 15.5px !important;}.cs-page .cs-hbars__track{background: #f2f4f5 !important;border-radius: 3px !important;height: 22px !important;}.cs-page .cs-hbars__fill{height: 100% !important;border-radius: 3px !important;background: var(--cs-ink) !important;}.cs-page .cs-hbars__fill.is-accent{background: var(--cs-accent) !important;}.cs-page .cs-hbars__fill.is-grey{background: #6f7d88 !important;}.cs-page .cs-hbars__fill.is-light{background: #a8b2ba !important;}.cs-page .cs-hbars__value{font-family: var(--cs-display) !important;font-size: 15px !important;text-align: right !important;}.cs-page .cs-hbars__value span{color: var(--cs-soft) !important;}.cs-page .cs-steps{border-left: 2px solid var(--cs-line-2) !important;}.cs-page .cs-step{display: grid !important;grid-template-columns: 56px minmax(0, 1fr) !important;padding: 0 0 28px !important;}.cs-page .cs-step__num{width: 34px !important;height: 34px !important;border-radius: 50% !important;background: var(--cs-ink) !important;color: #fff !important;font-family: var(--cs-display) !important;font-size: 14px !important;font-weight: 600 !important;display: flex !important;align-items: center !important;justify-content: center !important;margin-left: -18px !important;}.cs-page .cs-step:last-child{padding-bottom: 0 !important;}.cs-page .cs-step:last-child .cs-step__num{background: var(--cs-accent) !important;}.cs-page .cs-step h3{font-family: var(--cs-display) !important;font-size: 20px !important;font-weight: 600 !important;margin: 4px 0 10px !important;}.cs-page .cs-cards{display: flex !important;flex-wrap: wrap !important;justify-content: center !important;gap: 14px !important;margin: 0 0 32px !important;}.cs-page .cs-cards__item{background: var(--cs-panel) !important;border: 1px solid var(--cs-line-2) !important;border-radius: 6px !important;padding: 20px 22px !important;flex: 1 1 250px !important;max-width: 328px !important;}.cs-page .cs-cards__item h3{font-family: var(--cs-display) !important;font-size: 17px !important;font-weight: 600 !important;margin: 0 0 8px !important;}.cs-page .cs-cards__item p{margin: 0 !important;font-size: 16px !important;color: var(--cs-body) !important;}.cs-page .cs-cards--top .cs-cards__item{background: #fff !important;border-top: 3px solid var(--cs-accent) !important;border-radius: 0 0 6px 6px !important;}.cs-page .cs-takeaways{display: grid !important;gap: 14px !important;margin: 0 0 32px !important;counter-reset: cs-take !important;}.cs-page .cs-takeaways li{display: block !important;position: relative !important;padding-left: 40px !important;margin-bottom: 14px !important;list-style: none !important;counter-increment: cs-take !important;}.cs-page .cs-takeaways li::before{position: absolute !important;left: 0 !important;top: 2px !important;width: 26px !important;content: counter(cs-take, decimal-leading-zero) !important;font-family: var(--cs-display) !important;font-size: 13px !important;font-weight: 600 !important;color: var(--cs-accent-dark) !important;background: var(--cs-accent-soft) !important;border-radius: 4px !important;text-align: center !important;padding: 3px 0 !important;}.cs-page .cs-takeaways{padding-left: 0 !important;}.cs-page .cs-section{margin: 0 0 56px !important;}.cs-page .cs-rule{display: block !important;width: 44px !important;height: 3px !important;background: var(--cs-accent) !important;margin-bottom: 26px !important;}.cs-page .cs-faqs{display: grid !important;gap: 10px !important;}.cs-page .cs-faq{border: 1px solid var(--cs-line) !important;border-radius: 6px !important;}.cs-page .cs-faq > summary{display: flex !important;justify-content: space-between !important;align-items: center !important;gap: 16px !important;padding: 18px 22px !important;font-family: var(--cs-display) !important;font-size: 17px !important;font-weight: 600 !important;cursor: pointer !important;list-style: none !important;}.cs-page .cs-faq > summary::-webkit-details-marker{display: none !important;}.cs-page .cs-faq__plus{flex: 0 0 auto !important;color: var(--cs-accent) !important;font-size: 22px !important;line-height: 1 !important;transition: transform 0.2s ease !important;}.cs-page .cs-faq[open] .cs-faq__plus{transform: rotate(45deg) !important;}.cs-page .cs-faq__a{padding: 0 22px 20px !important;color: var(--cs-body) !important;}.cs-page .cs-faq__a p:last-child{margin-bottom: 0 !important;}.cs-page .cs-quote{border: 1px solid var(--cs-line) !important;border-radius: 6px !important;padding: 30px 32px !important;background: var(--cs-panel) !important;margin: 0 0 56px !important;}.cs-page .cs-quote__eyebrow{font-family: var(--cs-display) !important;font-size: 11.5px !important;letter-spacing: 0.14em !important;text-transform: uppercase !important;color: var(--cs-soft) !important;margin-bottom: 14px !important;}.cs-page .cs-quote blockquote{margin: 0 0 16px !important;padding: 0 !important;background: none !important;font-family: var(--cs-display) !important;font-size: 20px !important;line-height: 1.55 !important;font-weight: 500 !important;}.cs-page .cs-quote__by{font-size: 15px !important;color: var(--cs-muted) !important;}.cs-page .cs-cta{margin: 0 0 56px !important;border-radius: 6px !important;}.cs-page .cs-cta--dark{background: var(--cs-ink) !important;padding: 34px 36px !important;display: grid !important;grid-template-columns: minmax(0, 1fr) auto !important;gap: 26px !important;align-items: center !important;}.cs-page .cs-cta--dark h3{font-family: var(--cs-display) !important;font-size: 24px !important;font-weight: 600 !important;color: #fff !important;margin: 0 0 8px !important;}.cs-page .cs-cta--dark p{margin: 0 !important;color: #b6bfc7 !important;font-size: 16.5px !important;max-width: 56ch !important;}.cs-page .cs-cta--soft{background: var(--cs-accent-soft) !important;border: 1px solid var(--cs-accent-border) !important;padding: 34px 36px !important;text-align: center !important;}.cs-page .cs-cta--soft h3{font-family: var(--cs-display) !important;font-size: 26px !important;font-weight: 600 !important;margin: 0 0 10px !important;}.cs-page .cs-cta--soft p{margin: 0 auto 22px !important;max-width: 60ch !important;color: var(--cs-body) !important;}.cs-page .cs-btn{font-family: var(--cs-display) !important;font-weight: 600 !important;font-size: 16px !important;padding: 15px 26px !important;border-radius: 4px !important;white-space: nowrap !important;display: inline-block !important;text-decoration: none !important;transition: background 0.18s ease !important;}.cs-page .cs-btn--accent{background: var(--cs-accent) !important;color: #fff !important;}.cs-page .cs-btn--accent:hover{background: var(--cs-accent-dark) !important;color: #fff !important;}.cs-page .cs-btn--ink{background: var(--cs-ink) !important;color: #fff !important;padding: 15px 30px !important;}.cs-page .cs-btn--ink:hover{background: var(--cs-accent) !important;color: #fff !important;}.cs-page .cs-related{border-top: 1px solid var(--cs-line) !important;padding-top: 34px !important;}.cs-page .cs-related h2{font-family: var(--cs-display) !important;font-weight: 600 !important;font-size: 24px !important;margin: 0 0 22px !important;}.cs-page .cs-related__grid{display: grid !important;grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;gap: 18px !important;}.cs-page .cs-related__card{border: 1px solid var(--cs-line) !important;border-radius: 6px !important;padding: 22px !important;display: grid !important;gap: 8px !important;color: var(--cs-ink) !important;text-decoration: none !important;transition: border-color 0.18s ease !important;}.cs-page .cs-related__card:hover{border-color: var(--cs-accent) !important;}.cs-page .cs-related__kicker{font-family: var(--cs-display) !important;font-size: 11px !important;letter-spacing: 0.12em !important;text-transform: uppercase !important;color: var(--cs-accent-dark) !important;}.cs-page .cs-related__title{font-family: var(--cs-display) !important;font-size: 17.5px !important;font-weight: 600 !important;line-height: 1.35 !important;}.cs-page .cs-related__note{font-size: 15px !important;color: var(--cs-muted) !important;}.cs-page .cs-toc{position: sticky !important;top: 96px !important;align-self: start !important;}.cs-page .cs-toc__label{font-family: var(--cs-display) !important;font-size: 11.5px !important;letter-spacing: 0.14em !important;text-transform: uppercase !important;color: var(--cs-soft) !important;padding-bottom: 12px !important;border-bottom: 1px solid var(--cs-line) !important;}.cs-page .cs-toc nav{display: grid !important;gap: 2px !important;padding: 12px 0 0 !important;font-size: 15px !important;}.cs-page .cs-toc nav a{color: var(--cs-body) !important;padding: 6px 0 !important;text-decoration: none !important;}.cs-page .cs-toc nav a:hover, .cs-page .cs-toc nav a.is-active{color: var(--cs-accent-dark) !important;}.cs-page .cs-toc__cta{margin-top: 22px !important;padding: 18px !important;background: var(--cs-ink) !important;border-radius: 6px !important;}.cs-page .cs-toc__cta div{font-family: var(--cs-display) !important;font-size: 15.5px !important;font-weight: 600 !important;color: #fff !important;line-height: 1.4 !important;}.cs-page .cs-toc__cta a{display: inline-block !important;margin-top: 12px !important;color: #f0873f !important;font-family: var(--cs-display) !important;font-size: 14.5px !important;font-weight: 600 !important;text-decoration: none !important;}.cs-page .cs-toc__cta a:hover{color: #fff !important;}


@media (max-width: 1024px) {.cs-page .cs-grid{grid-template-columns: minmax(0, 1fr) !important;gap: 0 !important;}.cs-page .cs-toc{position: static !important;margin-top: 40px !important;}.cs-page .cs-toc nav{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;display: grid !important;}}
@media (max-width: 640px) {.cs-page .cs-shell{padding: 0 16px !important;}.cs-page .cs-resultsbar{position: static !important;}.cs-page .cs-cta--dark{grid-template-columns: minmax(0, 1fr) !important;}.cs-page .cs-facts__cell{border-right: 0 !important;border-bottom: 1px solid var(--cs-line) !important;}.cs-page .cs-hbars__row{grid-template-columns: 100px minmax(0, 1fr) !important;}.cs-page .cs-hbars__value{grid-column: 2 !important;text-align: left !important;}.cs-page .cs-bars__pair{height: 150px !important;}.cs-page .cs-chart__split{flex-wrap: wrap !important;gap: 20px !important;height: auto !important;}.cs-page .cs-chart__split > :last-child{flex: 1 1 100% !important;border-left: 0 !important;padding-left: 0 !important;border-top: 1px solid var(--cs-line) !important;padding-top: 18px !important;}}
@media print {.cs-page .cs-resultsbar, .cs-page .cs-toc, .cs-page .cs-cta{position: static !important;}.cs-page{font-size: 11pt !important;}}