.elementor-14118 .elementor-element.elementor-element-74df63d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:2rem;--padding-bottom:2rem;--padding-left:0rem;--padding-right:0rem;}.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14118 .elementor-element.elementor-element-0ac2572{font-family:"Inter", Sans-serif;font-size:14px;font-weight:400;color:#368D67;}.elementor-14118 .elementor-element.elementor-element-0ac2572 a{color:#163142;}.elementor-14118 .elementor-element.elementor-element-0ac2572 a:hover{color:#368D67;}.elementor-14118 .elementor-element.elementor-element-3bdcb61{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14118 .elementor-element.elementor-element-52549de{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14118 .elementor-element.elementor-element-0379f1a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14118 .elementor-element.elementor-element-f8c795d > .elementor-widget-container{background-color:#0F4160;}.elementor-14118 .elementor-element.elementor-element-e995eeb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14118 .elementor-element.elementor-element-207990f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14118 .elementor-element.elementor-element-207990f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-14118 .elementor-element.elementor-element-f046757{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14118 .elementor-element.elementor-element-ac338f7{--display:flex;--z-index:0;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-14118 .elementor-element.elementor-element-3bdcb61{--padding-top:1rem;--padding-bottom:1rem;--padding-left:1rem;--padding-right:1rem;}}@media(min-width:768px){.elementor-14118 .elementor-element.elementor-element-74df63d{--content-width:1190px;}.elementor-14118 .elementor-element.elementor-element-207990f{--width:70%;}}/* Start custom CSS *//*
==========================================================
  VB & PARTNERS — Single Case Study CSS
  Paste into: Elementor → Site Settings → Custom CSS

  Brand:
    Text:    #0F4160
    Accent:  #35A692
    Border:  #D6E4EC
    Light BG:#F4F8FA
    White:   #ffffff
    Font:    Inter, Sans-serif
==========================================================
*/

:root {
  --vb-navy:   #0F4160;
  --vb-teal:   #35A692;
  --vb-border: #D6E4EC;
  --vb-bg:     #F4F8FA;
  --vb-white:  #ffffff;
}

/* ----------------------------------------------------------
   TYPOGRAPHY BASE
---------------------------------------------------------- */
.single-case-study body,
.single-case-study .elementor-widget-text-editor {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  color: var(--vb-navy);
}

.single-case-study .elementor-element,
.single-case-study .e-con,
.single-case-study .e-con-inner {
  border-radius: 0 !important;
}

/* ----------------------------------------------------------
   BACK LINK
   CSS class on widget: vb-back
---------------------------------------------------------- */
.vb-back a,
.vb-back .elementor-widget-container a {
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--vb-navy) !important;
  opacity: 0.45;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: opacity 0.2s !important;
}
.vb-back a:hover,
.vb-back .elementor-widget-container a:hover {
  opacity: 1;
}

/* ----------------------------------------------------------
   HERO SECTION
   CSS class on section: vb-hero-section
   Inside: one HTML widget with class vb-hero-content
---------------------------------------------------------- */
.vb-hero-section {
  padding: 0 40px 0 !important;
  border-top: 3px solid var(--vb-teal) !important;
}

/* The HTML block rendered inside the widget */
.vb-hero-content {
  border: 1px solid var(--vb-border);
  border-top: none;
  padding: 48px 52px;
}

.vb-label-wrap {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vb-teal);
  display: block;
  margin-bottom: 14px;
}

.vb-hero-title {
  font-family: "Inter", sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--vb-navy);
  margin: 0 0 28px;
  text-transform: none;
}

/* Tags */
.vb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vb-tag {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vb-navy);
  border: 1px solid var(--vb-border);
  padding: 4px 12px;
  background: var(--vb-white);
  border-radius: 2px;
  display: inline-block;
}
.vb-tag.highlight {
  background: var(--vb-teal);
  border-color: var(--vb-teal);
  color: var(--vb-white);
}

/* ----------------------------------------------------------
   STATS BAR
   CSS class on section: vb-stats-bar
   Inside: one HTML widget — the raw .vb-stat-item divs
   are rendered directly by the HTML widget, no Elementor
   container wrapping them, so we target them directly
---------------------------------------------------------- */
.vb-stats-bar {
  background-color: var(--vb-navy) !important;
}

/* Row wrapper — lives inside the HTML widget, owns the flex layout */
.vb-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Each stat div */
.vb-stats-row .vb-stat-item {
  flex: 1;
  padding: 32px 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vb-stats-row .vb-stat-item:last-child {
  border-right: none;
}

.vb-stats-row .vb-stat-value {
  font-family: "Inter", sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--vb-teal);
  line-height: 1;
  display: block;
}

.vb-stats-row .vb-stat-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  display: block;
}

/* ----------------------------------------------------------
   BODY SECTION — TWO COLUMN LAYOUT
   CSS class on section: vb-body-section
---------------------------------------------------------- */
.vb-body-section {
  padding: 64px 40px !important;
}

.vb-body-section > .e-con-inner,
.vb-body-section.e-con > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 64px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Article column */
.vb-body-section .vb-article {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: flex-start !important;
}

/* Sidebar column */
.vb-body-section .vb-sidebar {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  align-self: flex-start !important;
  position: sticky !important;
  top: 32px !important;
}

/* ----------------------------------------------------------
   ARTICLE CONTENT
   Each section (Client, Challenge, Approach, Results)
   is its own HTML widget — classes are on the raw HTML
   elements rendered inside the widget, not on Elementor
   wrapper elements
---------------------------------------------------------- */

/* Section title — h2 inside HTML widget */
.vb-section-title {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--vb-navy);
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--vb-teal);
  margin-bottom: 20px;
}

/* Divider — hr inside HTML widget */
.vb-divider {
  border: none;
  border-top: 1px solid var(--vb-border);
  margin: 48px 0 0;
}

/* Body text — p tags inside HTML widget */
.vb-body-text p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  color: var(--vb-navy);
  text-align: start;
}
.vb-body-text p + p {
  margin-top: 16px;
}

/* Results list — ul inside HTML widget */
.vb-results-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border: 1px solid var(--vb-border);
  padding: 0;
}
.vb-results-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.7em;
  color: var(--vb-navy);
  padding: 16px 20px;
  border-bottom: 1px solid var(--vb-border);
  margin: 0;
}
.vb-results-list li:last-child { border-bottom: none; }
.vb-results-list li::before {
  content: "✓";
  font-size: 13px;
  font-weight: 700;
  color: var(--vb-teal);
  flex-shrink: 0;
  padding-top: 3px;
}

/* ----------------------------------------------------------
   SIDEBAR
   HTML widget — classes on raw HTML elements
---------------------------------------------------------- */
.vb-sidebar-card {
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-top: 2px solid var(--vb-teal);
  padding: 28px;
  width: 100%;
}

.vb-sidebar-heading {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vb-navy);
  display: block;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vb-border);
  margin-bottom: 20px;
}

.vb-meta-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--vb-border);
  margin-bottom: 24px;
}

.vb-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vb-meta-key {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vb-navy);
  opacity: 0.40;
}
.vb-meta-val {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--vb-navy);
  line-height: 1.5em;
}

/* Service tags */
.vb-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.vb-service-tag {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--vb-white);
  border: 1px solid var(--vb-border);
  color: var(--vb-navy);
  border-radius: 2px;
  display: inline-block;
}

/* CTA button — plain <a> tag in HTML widget */
.vb-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--vb-teal);
  color: var(--vb-white) !important;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  text-decoration: none !important;
  border-radius: 2px;
  transition: background 0.2s;
}
.vb-cta-btn:hover { background: #2a8a79; }

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 900px) {
  .vb-body-section > .e-con-inner,
  .vb-body-section.e-con > .e-con-inner {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .vb-body-section .vb-sidebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
  }
}

@media (max-width: 680px) {
  .vb-hero-section { padding: 0 20px 0 !important; }
  .vb-hero-content { padding: 28px 24px !important; }
  .vb-hero-title { font-size: 28px !important; }
  .vb-stats-row { flex-wrap: wrap !important; }
  .vb-stats-row .vb-stat-item {
    flex: 1 1 50% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .vb-body-section { padding: 40px 20px !important; }
}/* End custom CSS */