:root {
   --ink: #102b49;
   --teal: #087bd1;
   --teal2: #10a99b;
   --pale: #f2faf9;
   --line: #dfe9ed;
   --muted: #60758a;
   --navy: #062641;
}

html {
   scroll-behavior: smooth
}

body {
   font-family: "Inter", "Segoe UI", Arial, sans-serif;
   color: var(--ink);
   margin: 0;
   background: #fff;
}

.container {
   max-width: 1180px
}

.navbar {
   height: 78px;
   background: #fff;
   border-bottom: 1px solid #eef3f5
}

.navbar-brand img {
   width: 150px;
   height: auto
}

.nav-link {
   font-size: 14px;
   font-weight: 600;
   color: #15344e !important;
   padding: .75rem .85rem !important
}

.nav-link.active {
   color: var(--teal) !important;
   position: relative
}

.nav-link.active:after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 1px;
   width: 25px;
   height: 2px;
   background: var(--teal);
   transform: translateX(-50%)
}

.btn-vbb {
   background: linear-gradient(90deg, #087c76, #10a99b);
   border: 0;
   color: #fff;
   font-weight: 700;
   border-radius: 24px;
   padding: 11px 22px
}

.btn-vbb:hover {
   color: #fff;
   filter: brightness(.95)
}

.btn-outline-vbb {
   border: 1px solid var(--teal);
   color: var(--teal);
   font-weight: 700;
   border-radius: 9px;
   padding: 11px 23px
}

.btn-outline-vbb:hover {
   background: var(--teal);
   color: #fff
}

.hero {
   min-height: 405px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(90deg, #f4fbfb 0%, #eef8f9 45%, #e6f1f3 100%);
}

.hero .container {
   height: 405px;
   position: relative;
   z-index: 2
}

.hero-copy {
   padding-top: 57px;
   padding-bottom: 38px;
   max-width: 575px
}

.hero-kicker {
   font-size: 11px;
   letter-spacing: .19em;
   font-weight: 800;
   color: #087e78;
   text-transform: uppercase;
   margin-bottom: 13px
}

.hero-title {
   font-size: 48px;
   line-height: 1.04;
   letter-spacing: -.035em;
   font-weight: 800;
   margin: 0 0 15px;
   color: #102b49
}

.hero-title .accent {
   color: #087bd1
}

.hero-text {
   font-size: 16px;
   line-height: 1.5;
   color: #274862;
   max-width: 470px;
   margin-bottom: 20px
}

.hero-art {
   position: absolute;
   right: 0;
   top: 0;
   width: 59%;
   height: 100%;
   background-image: url("home-hero-art.jpg");
   background-size: cover;
   background-position: center right;
}

.hero-art:before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, #eef8f9 0%, #eef8f900 30%);
}

.hero-art:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, #ffffff00 78%, #e6f1f300 100%);
}

.hero-mobile-art {
   display: none
}

.metric-strip {
   background: #f7fbfb;
   border-top: 1px solid #e8f0f2;
   border-bottom: 1px solid #e8f0f2
}

.metric {
   padding: 25px 15px;
   display: flex;
   align-items: center;
   gap: 14px;
   border-right: 1px solid #dce8eb
}

.metric:last-child {
   border-right: 0
}

.metric-icon {
   width: 32px;
   height: 32px;
   border: 2px solid var(--teal);
   color: var(--teal);
   border-radius: 8px;
   display: grid;
   place-items: center;
   font-weight: 800
}

.metric strong {
   display: block;
   font-size: 16px
}

.metric span {
   font-size: 12px;
   color: #657a8e
}

.section {
   padding: 40px 0
}

.section.alt {
   background: #f3fafb
}

.eyebrow {
   font-size: 10px;
   letter-spacing: .18em;
   font-weight: 800;
   color: var(--teal);
   text-transform: uppercase
}

.section-title {
   font-size: 27px;
   font-weight: 800;
   letter-spacing: -.02em;
   margin: 5px 0 20px;
   color: #102b49
}

.section-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   margin-bottom: 12px
}

.section-head a {
   font-size: 12px;
   color: var(--teal);
   font-weight: 700;
   text-decoration: none
}

.service-card,
.product-card,
.industry-card,
.case-card,
.value-card,
.process-card {
   border: 1px solid #dce7eb;
   border-radius: 10px;
   background: #fff;
   box-shadow: 0 3px 13px rgba(15, 57, 83, .035);
   height: 100%
}

.service-card {
   padding: 17px 18px
}

.icon-tile {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: #e7f7f6;
   color: var(--teal);
   display: grid;
   place-items: center;
   font-size: 20px;
   margin-bottom: 12px
}

.icon-purple {
   background: #f0e9ff;
   color: #8155d6
}

.icon-orange {
   background: #fff0dc;
   color: #dc8a27
}

.icon-blue {
   background: #e8f1ff;
   color: #2876d0
}

.service-card h5,
.product-card h5 {
   font-size: 15px;
   font-weight: 750;
   margin-bottom: 7px
}

.service-card p,
.product-card p {
   font-size: 12px;
   line-height: 1.5;
   color: #60758a;
   margin-bottom: 10px
}

.card-link {
   font-size: 12px;
   color: var(--teal);
   font-weight: 700;
   text-decoration: none
}

.problem-card {
   padding: 19px 12px;
   text-align: center;
   border: 0;
   background: #fff;
   border-radius: 9px;
   box-shadow: 0 5px 18px rgba(12, 67, 85, .07);
   height: 100%
}

.problem-card .big-icon {
   font-size: 26px;
   color: var(--teal);
   margin-bottom: 8px
}

.problem-card strong {
   display: block;
   font-size: 12px;
   line-height: 1.35
}

.product-card {
   padding: 15px;
   overflow: hidden
}

.product-card .product-img {
   height: 105px;
   margin-top: 6px;
   background: linear-gradient(135deg, #eef7f9, #d8edf0);
   border-radius: 8px;
   display: flex;
   align-items: end;
   justify-content: center;
   overflow: hidden
}

.device {
   width: 70%;
   height: 68%;
   border: 5px solid #1f3444;
   border-bottom-width: 9px;
   border-radius: 6px 6px 2px 2px;
   background: linear-gradient(135deg, #fff, #e8f4f6);
   position: relative
}

.device:after {
   content: "";
   position: absolute;
   left: 15%;
   right: 15%;
   top: 25%;
   height: 5px;
   background: #13a398;
   box-shadow: 0 14px #b6d9d8, 0 28px #d2e7e8
}

.product-card .product-name {
   color: #086f73;
   font-weight: 800
}

.product-card small {
   color: #60758a;
   font-size: 10px
}

.industry-card {
   padding: 15px;
   text-align: center;
   background: #f6fbfc;
   border: 0;
   box-shadow: none
}

.industry-card .big-icon {
   font-size: 23px;
   color: var(--teal);
   margin-bottom: 7px
}

.industry-card strong {
   font-size: 12px
}

.process-wrap {
   display: grid;
   grid-template-columns: 1.2fr repeat(4, 1fr);
   gap: 20px;
   align-items: start
}

.process-intro p {
   font-size: 13px;
   color: #60758a;
   line-height: 1.5
}

.process-step {
   position: relative
}

.step-num {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--teal);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 11px;
   font-weight: 800;
   margin-bottom: 10px
}

.process-step:after {
   content: "→";
   position: absolute;
   right: -14px;
   top: 0;
   color: #a6c6cf
}

.process-step:last-child:after {
   display: none
}

.process-step h6 {
   font-size: 13px;
   font-weight: 800;
   margin-bottom: 4px
}

.process-step p {
   font-size: 11px;
   line-height: 1.45;
   color: #60758a
}

.case-card {
   display: flex;
   gap: 12px;
   padding: 9px
}

.case-img {
   width: 115px;
   height: 66px;
   object-fit: cover;
   border-radius: 6px
}

.case-card h6 {
   font-size: 12px;
   font-weight: 800;
   margin: 4px 0 3px
}

.case-card p {
   font-size: 10px;
   color: #60758a;
   margin: 0 0 4px
}

.case-card a {
   font-size: 10px;
   color: var(--teal);
   font-weight: 700;
   text-decoration: none
}

.cta {
   padding: 25px 0;
   background: linear-gradient(100deg, #087e78, #045f72);
   color: #fff;
   position: relative;
   overflow: hidden
}

.cta:after {
   content: "";
   position: absolute;
   right: 0;
   top: -100px;
   width: 500px;
   height: 260px;
   border-radius: 50%;
   border: 1px solid #ffffff1f;
   box-shadow: 0 0 0 35px #ffffff08, 0 0 0 70px #ffffff04
}

.cta h3 {
   font-size: 20px;
   font-weight: 800;
   margin: 0 0 4px
}

.cta p {
   font-size: 12px;
   margin: 0;
   color: #d9f3f1
}

footer {
   background: #062640;
   color: #c4d6df;
   padding: 38px 0 16px
}

.footer-logo {
   width: 145px;
   filter: brightness(0) invert(1);
   margin-bottom: 10px
}

footer p,
footer a {
   font-size: 11px;
   line-height: 1.6
}

footer a {
   color: #c4d6df;
   text-decoration: none;
   display: block;
   margin: 4px 0
}

footer h6 {
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   margin-bottom: 10px
}

.footer-bottom {
   border-top: 1px solid #ffffff18;
   margin-top: 20px;
   padding-top: 10px;
   font-size: 10px
}

.inner-hero {
   min-height: 315px;
   background: linear-gradient(100deg, #eaf7f7, #f7fbfb);
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center
}

.inner-hero .container {
   position: relative;
   z-index: 2
}

.inner-hero h1 {
   font-size: 42px;
   font-weight: 800;
   letter-spacing: -.035em;
   margin: 8px 0 12px
}

.inner-hero p {
   max-width: 580px;
   color: #516b80;
   line-height: 1.55
}

.inner-hero-art {
   height: 315px;
   background-image: url("home-hero-art.jpg");
   background-size: cover;
   background-position: center;
   opacity: .95
}

.inner-hero-art:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, #eaf7f700, #eaf7f766)
}

.breadcrumb {
   font-size: 11px;
   color: #6d8190
}

.page-content {
   padding: 48px 0
}

.feature-panel {
   padding: 25px;
   border: 1px solid #dfe9ed;
   border-radius: 12px;
   background: #fff;
   height: 100%
}

.feature-panel h4 {
   font-size: 20px;
   font-weight: 800
}

.feature-panel p {
   font-size: 13px;
   color: #60758a;
   line-height: 1.6
}

.contact-box {
   padding: 22px;
   border: 1px solid #dfe9ed;
   border-radius: 12px;
   background: #fff
}

.form-control,
.form-select {
   border-color: #dfe9ed;
   border-radius: 8px;
   padding: 11px 12px;
   font-size: 13px
}

.map-placeholder {
   height: 300px;
   border-radius: 12px;
   background: linear-gradient(135deg, #e3f1f4, #d0e7eb);
   display: grid;
   place-items: center;
   color: var(--teal);
   font-weight: 800
}

@media(max-width:991px) {
   .navbar {
      height: auto;
      padding: 8px 0
   }

   .navbar-brand img {
      width: 135px
   }

   .hero {
      min-height: 520px
   }

   .hero .container {
      height: auto
   }

   .hero-copy {
      padding-top: 45px;
      position: relative;
      z-index: 3
   }

   .hero-art {
      opacity: .52;
      width: 100%;
      z-index: 0
   }

   .metric {
      border-bottom: 1px solid #dce8eb
   }

   .metric:nth-child(2n) {
      border-right: 0
   }

   .process-wrap {
      grid-template-columns: 1fr 1fr
   }

   .process-intro {
      grid-column: 1/-1
   }

   .process-step:after {
      display: none
   }
}

@media(max-width:575px) {
   .container {
      padding-left: 18px;
      padding-right: 18px
   }

   .hero {
      min-height: 570px
   }

   .hero-copy {
      padding-top: 40px
   }

   .hero-title {
      font-size: 35px
   }

   .hero-text {
      font-size: 14px
   }

   .hero-art {
      height: 360px;
      top: auto;
      bottom: 0;
      opacity: .38;
      background-position: 60% center
   }

   .hero-art:before {
      background: linear-gradient(180deg, #eef8f900 0%, #eef8f9 92%)
   }

   .metric {
      border-right: 0
   }

   .section {
      padding: 32px 0
   }

   .section-title {
      font-size: 24px
   }

   .section-head {
      align-items: start
   }

   .section-head a {
      margin-top: 8px
   }

   .process-wrap {
      grid-template-columns: 1fr
   }

   .inner-hero {
      min-height: 370px
   }

   .inner-hero h1 {
      font-size: 34px
   }

   .inner-hero-art {
      display: none
   }
}

/* =========================================================
   VBB Exact-Design Theme Layer
   Palette and non-home hero banners are taken from
   VBB_Business_Solutions_Exact_Design_HTML.
   ========================================================= */
:root {
   --blue: #0879d1;
   --blue2: #12a9e9;
   --navy: #053d79;
   --ink: #063b77;
   --text: #36506a;
   --light: #f4f9fd;
   --line: #d9e9f5;
   --muted: #6e8498;
}

body {
   color: var(--text);
   background: #eef5f9
}

.navbar {
   border-bottom-color: #dceaf3
}

.nav-link {
   color: #234c72 !important
}

.nav-link.active {
   color: var(--blue) !important
}

.nav-link.active:after {
   background: var(--blue)
}

.btn-vbb {
   background: #087bd1;
   border-radius: 7px;
   box-shadow: 0 5px 12px #087bd126
}

.btn-outline-vbb {
   border-color: #087bd1;
   color: #087bd1
}

.btn-outline-vbb:hover {
   background: #087bd1;
   color: #fff
}

.page-hero {
   position: relative;
   min-height: 260px;
   height: 260px;
   overflow: hidden;
   color: #fff;
   background-size: cover;
   background-position: center
}

.page-hero .container {
   height: 100%;
   position: relative;
   z-index: 2
}

.page-hero-content {
   height: 100%;
   display: flex;
   align-items: center
}

.page-hero-copy {
   max-width: 620px;
   padding-left: 25px
}

.page-kicker {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .08em;
   margin-bottom: 6px;
   color: #0578cf
}

.page-kicker.dark-kicker {
   color: #d7efff
}

.page-hero h1 {
   font-size: 32px;
   line-height: 1.05;
   letter-spacing: -.025em;
   margin: 0 0 12px;
   font-weight: 800;
   color: inherit
}

.page-hero p {
   font-size: 13px;
   line-height: 1.5;
   max-width: 540px;
   margin: 0 0 16px;
   color: inherit
}

.page-hero .breadcrumbs {
   font-size: 10px;
   opacity: .85;
   margin-top: 12px
}

.page-hero.services {
   background-image: url('services-hero.jpg')
}

.page-hero.products {
   height: 275px;
   min-height: 275px;
   background-image: url('products-hero.jpg')
      /* background-image: linear-gradient(90deg, #033d77ee 0%, #056cbdc9 56%, #056cbd68 100%), url('products-hero.jpg') */
}

.page-hero.about {
   background-image: url('about-hero.jpg');
   color: var(--navy)
}

.page-hero.industries {
   background-image: url('industries-hero.jpg')
}

.page-hero.cases {
   background-image: url('cases-hero.jpg');
   color: var(--navy)
}

.page-hero.contact {
   height: 180px;
   min-height: 180px;
   background-image: url('contact-hero.jpg');
   color: var(--navy)
}

.page-hero.about .page-hero-copy,
.page-hero.cases .page-hero-copy,
.page-hero.contact .page-hero-copy {
   padding-left: 25px
}

.page-hero.about h1,
.page-hero.cases h1,
.page-hero.contact h1 {
   color: #03458d
}

.page-hero.about p,
.page-hero.cases p,
.page-hero.contact p {
   color: #42647f
}

/* Bring the body cards/sections closer to the exact-design blue system. */
.section-title,
.inner-hero h1 {
   color: #064b8f
}

.eyebrow {
   color: #0578cf
}

.service-card,
.product-card,
.industry-card,
.case-card,
.value-card,
.process-card,
.feature-panel,
.contact-box {
   border-color: var(--line)
}

.icon-tile {
   background: #e7f5ff;
   color: #087bd1
}

.icon-blue {
   background: #e7f5ff;
   color: #087bd1
}

.card-link {
   color: #087bd1
}

.product-card .product-name {
   color: #07518f
}

.industry-card .big-icon,
.problem-card .big-icon {
   color: #087bd1
}

.cta {
   background: linear-gradient(100deg, #033d77, #056cbd)
}

footer {
   background: #073b6e
}

/* ── Chronological Timeline ── */
.timeline-vbb {
   position: relative;
   padding: 20px 0;
   margin-top: 30px;
}

.timeline-vbb::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 3px;
   background: linear-gradient(180deg, #087bd1 0%, #10a99b 60%, rgba(16, 169, 155, 0.2) 100%);
   transform: translateX(-50%);
   border-radius: 2px;
}

.timeline-item {
   position: relative;
   margin-bottom: 45px;
   width: 100%;
   display: flex;
}

.timeline-item:last-child {
   margin-bottom: 0;
}

.timeline-item.left {
   justify-content: flex-start;
}

.timeline-item.right {
   justify-content: flex-end;
}

.timeline-content {
   width: 45%;
   position: relative;
}

.timeline-badge {
   position: absolute;
   left: 50%;
   top: 15px;
   transform: translateX(-50%);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid var(--teal);
   color: var(--navy);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 800;
   box-shadow: 0 4px 14px rgba(8, 123, 209, 0.25);
   z-index: 2;
   transition: transform 0.25s ease, background-color 0.25s ease;
}

.timeline-item:hover .timeline-badge {
   transform: translateX(-50%) scale(1.12);
   background: var(--teal);
   color: #fff;
}

.timeline-badge.badge-future {
   border-color: #10a99b;
   background: #10a99b;
   color: #fff;
}

.timeline-card {
   background: #fff;
   border: 1px solid #d7e8f4;
   border-radius: 12px;
   padding: 22px 24px;
   box-shadow: 0 4px 18px rgba(5, 62, 120, .05);
   transition: transform .22s ease, box-shadow .22s ease;
   position: relative;
}

.timeline-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 30px rgba(5, 62, 120, .12);
}

.timeline-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 8px;
}

.timeline-year-tag {
   font-size: 11px;
   font-weight: 800;
   color: var(--teal);
   text-transform: uppercase;
   letter-spacing: .08em;
   background: #eaf4fd;
   padding: 3px 10px;
   border-radius: 14px;
   border: 1px solid #c8e0f4;
}

.timeline-country {
   font-size: 11px;
   font-weight: 700;
   color: #60758a;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.timeline-title {
   font-size: 18px;
   font-weight: 800;
   color: var(--ink);
   margin: 4px 0 2px;
   letter-spacing: -.02em;
}

.timeline-subtitle {
   font-size: 12px;
   font-weight: 700;
   color: #10a99b;
   margin-bottom: 10px;
}

.timeline-text {
   font-size: 13px;
   color: #3d5a72;
   line-height: 1.6;
   margin-bottom: 14px;
}

.timeline-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.timeline-tags span {
   background: #f2faf9;
   color: #064e4b;
   border: 1px solid #c4e9e5;
   font-size: 10px;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 4px;
}

.timeline-item.left .timeline-card::after {
   content: '';
   position: absolute;
   right: -8px;
   top: 24px;
   width: 0;
   height: 0;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-left: 8px solid #d7e8f4;
}

.timeline-item.right .timeline-card::after {
   content: '';
   position: absolute;
   left: -8px;
   top: 24px;
   width: 0;
   height: 0;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-right: 8px solid #d7e8f4;
}

@media(max-width: 991px) {
   .timeline-vbb::before {
      left: 24px;
   }

   .timeline-item {
      justify-content: flex-end !important;
   }

   .timeline-content {
      width: calc(100% - 60px);
   }

   .timeline-badge {
      left: 24px;
   }

   .timeline-item.left .timeline-card::after,
   .timeline-item.right .timeline-card::after {
      left: -8px;
      right: auto;
      border-left: none;
      border-right: 8px solid #d7e8f4;
   }
}

/* ── Premium Executive Story Section ── */
.story-hero-card {
   background: linear-gradient(145deg, #052648 0%, #0a3d69 50%, #0861a3 100%);
   border-radius: 16px;
   padding: 32px 28px;
   color: #fff;
   box-shadow: 0 12px 36px rgba(5, 38, 72, .22);
   position: relative;
   overflow: hidden;
}

.story-hero-card::before {
   content: '';
   position: absolute;
   top: -60px;
   right: -60px;
   width: 180px;
   height: 180px;
   background: radial-gradient(circle, rgba(16, 169, 155, 0.25) 0%, rgba(16, 169, 155, 0) 70%);
   pointer-events: none;
}

.story-hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #d7efff;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
   padding: 4px 12px;
   border-radius: 20px;
   margin-bottom: 20px;
}

.story-metric-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 22px;
}

.story-metric-item {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 12px;
   padding: 16px;
   text-align: center;
   transition: transform .2s ease, background-color .2s ease;
}

.story-metric-item:hover {
   transform: translateY(-3px);
   background: rgba(255, 255, 255, 0.12);
}

.story-metric-item strong {
   display: block;
   font-size: 28px;
   font-weight: 800;
   color: #fff;
   line-height: 1;
   margin-bottom: 4px;
   letter-spacing: -.03em;
}

.story-metric-item small {
   font-size: 11px;
   color: #b3d7f5;
   font-weight: 600;
   display: block;
   line-height: 1.3;
}

.story-hero-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   padding-top: 14px;
   font-size: 11px;
   color: #c4e2fb;
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
}

.story-hero-footer i {
   color: #10a99b;
   font-size: 14px;
}

.story-feature-list {
   margin: 20px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.story-feature-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.story-feature-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #e7f5ff;
   color: #087bd1;
   display: grid;
   place-items: center;
   font-size: 13px;
   flex-shrink: 0;
   margin-top: 2px;
}

.story-feature-text strong {
   display: block;
   font-size: 14px;
   color: var(--ink);
   margin-bottom: 1px;
}

.story-feature-text p {
   font-size: 12px;
   color: #60758a;
   margin: 0;
   line-height: 1.45;
}

.story-value-card {
   background: #fff;
   border: 1px solid #d7e8f4;
   border-radius: 12px;
   padding: 18px 20px;
   box-shadow: 0 4px 14px rgba(5, 62, 120, 0.04);
   display: flex;
   align-items: center;
   gap: 14px;
   transition: transform .2s ease, box-shadow .2s ease;
   height: 100%;
}

.story-value-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(5, 62, 120, 0.1);
}

.story-value-icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: linear-gradient(135deg, #eaf4fd, #d4e8fa);
   color: #087bd1;
   display: grid;
   place-items: center;
   font-size: 20px;
   flex-shrink: 0;
}

.story-value-body strong {
   display: block;
   font-size: 14px;
   color: var(--ink);
   font-weight: 800;
   margin-bottom: 2px;
}

.story-value-body span {
   font-size: 11px;
   color: #60758a;
   line-height: 1.35;
   display: block;
}

/* ── Enterprise Services Cards (Redesigned) ── */
.service-card-vbb {
   background: #fff;
   border: 1px solid #dce8f2;
   border-top: 4px solid var(--teal);
   border-radius: 14px;
   padding: 28px 24px;
   box-shadow: 0 4px 20px rgba(5, 62, 120, .05);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   overflow: hidden;
}

.service-card-vbb:hover {
   transform: translateY(-6px);
   box-shadow: 0 14px 36px rgba(5, 62, 120, .14);
}

/* Category Accent Borders */
.service-card-ai {
   border-top-color: #7c3aed;
}

.service-card-data-eng {
   border-top-color: #0284c7;
}

.service-card-bi {
   border-top-color: #0d9488;
}

.service-card-middleware {
   border-top-color: #d97706;
}

.service-card-custom {
   border-top-color: #2563eb;
}

.service-card-product {
   border-top-color: #e11d48;
}

.service-card-gis {
   border-top-color: #0f6c56;
}

.service-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px;
}

.service-icon-box {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: linear-gradient(135deg, #eaf4fd, #d0e6fa);
   color: #087bd1;
   display: grid;
   place-items: center;
   font-size: 24px;
   transition: transform .25s ease, background .25s ease, color .25s ease;
}

.service-card-vbb:hover .service-icon-box {
   transform: scale(1.08);
}

/* Icon Color Variations */
.icon-ai {
   background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
   color: #7c3aed;
}

.icon-data-eng {
   background: linear-gradient(135deg, #e0f2fe, #bae6fd);
   color: #0284c7;
}

.icon-bi {
   background: linear-gradient(135deg, #ccfbf1, #99f6e4);
   color: #0d9488;
}

.icon-middleware {
   background: linear-gradient(135deg, #fef3c7, #fde68a);
   color: #d97706;
}

.icon-custom {
   background: linear-gradient(135deg, #dbeafe, #bfdbfe);
   color: #2563eb;
}

.icon-product {
   background: linear-gradient(135deg, #ffe4e6, #fecdd3);
   color: #e11d48;
}

.icon-gis {
   background: linear-gradient(135deg, #d1fae5, #a7f3d0);
   color: #0f6c56;
}

.service-tag {
   font-size: 10px;
   font-weight: 800;
   color: #087bd1;
   background: #eaf4fd;
   border: 1px solid #c8e0f4;
   padding: 4px 11px;
   border-radius: 20px;
   letter-spacing: .06em;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.tag-ai {
   background: #f3e8ff;
   color: #7c3aed;
   border-color: #ddd6fe;
}

.tag-data-eng {
   background: #e0f2fe;
   color: #0284c7;
   border-color: #bae6fd;
}

.tag-bi {
   background: #ccfbf1;
   color: #0d9488;
   border-color: #99f6e4;
}

.tag-middleware {
   background: #fef3c7;
   color: #d97706;
   border-color: #fde68a;
}

.tag-custom {
   background: #dbeafe;
   color: #2563eb;
   border-color: #bfdbfe;
}

.tag-product {
   background: #ffe4e6;
   color: #e11d48;
   border-color: #fecdd3;
}

.tag-gis {
   background: #d1fae5;
   color: #0f6c56;
   border-color: #a7f3d0;
}

.service-card-vbb h4 {
   font-size: 20px;
   font-weight: 800;
   color: #053d79;
   margin: 0 0 10px;
   letter-spacing: -.02em;
}

.service-card-vbb p {
   font-size: 13px;
   color: #4d6780;
   line-height: 1.6;
   margin-bottom: 16px;
}

.service-bullets {
   list-style: none;
   padding: 0;
   margin: 0 0 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex-grow: 1;
}

.service-bullets li {
   font-size: 12px;
   color: #334e68;
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
}

.service-bullets li i {
   color: #10a99b;
   font-size: 15px;
   flex-shrink: 0;
}

.service-card-tech {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: auto;
   padding-top: 16px;
   border-top: 1px solid #edf4fa;
}

.service-card-tech span {
   background: #f2faf9;
   color: #064e4b;
   border: 1px solid #c4e9e5;
   font-size: 10px;
   font-weight: 700;
   padding: 3px 9px;
   border-radius: 5px;
}

@media(max-width:575px) {

   .page-hero,
   .page-hero.products,
   .page-hero.contact {
      height: auto;
      min-height: 260px
   }

   .page-hero.contact {
      min-height: 210px
   }

   .page-hero-copy {
      padding: 42px 0 38px 15px;
      max-width: 100%
   }

   .page-hero h1 {
      font-size: 30px
   }

   .page-hero p {
      font-size: 12px;
      max-width: 95%
   }
}

/* Business-first industry cards */
.industry-detail-card {
   background: #fff;
   border: 1px solid #e7eeee;
   border-radius: 16px;
   box-shadow: 0 8px 24px rgba(15, 48, 48, .05);
   transition: transform .2s ease, box-shadow .2s ease;
}

.industry-detail-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(15, 48, 48, .09);
}

.industry-detail-card h4 {
   margin: 0;
   font-weight: 700;
}

.industry-detail-card p {
   color: #687477;
   line-height: 1.7;
}


/* =========================================================
   VB Business Solutions — Client-first visual refresh
   ========================================================= */
:root {
   --vb-blue: #087bd1;
   --vb-blue-dark: #053d79;
   --vb-teal: #10a99b;
   --vb-ink: #102b49;
   --vb-soft: #f5f9fc;
   --vb-line: #dce8f2;
}

.vb-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #087bd1;
   margin-bottom: 12px
}

.vb-kicker:before {
   content: "";
   width: 24px;
   height: 2px;
   background: #10a99b;
   border-radius: 2px
}

.vb-lead {
   font-size: 16px;
   line-height: 1.75;
   color: #526b80;
   max-width: 760px
}

.vb-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 25px
}

.vb-trust-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 22px
}

.vb-trust-chip {
   padding: 8px 12px;
   border: 1px solid rgba(8, 123, 209, .18);
   border-radius: 999px;
   background: rgba(255, 255, 255, .72);
   font-size: 11px;
   font-weight: 700;
   color: #315a77
}

.vb-stat-band {
   margin-top: -1px;
   position: relative;
   z-index: 4
}

.vb-stat-card {
   height: 100%;
   padding: 22px 20px;
   background: #fff;
   border: 1px solid #e2edf3;
   border-radius: 14px;
   box-shadow: 0 10px 30px rgba(5, 61, 121, .07)
}

.vb-stat-card strong {
   display: block;
   font-size: 26px;
   line-height: 1;
   color: #053d79;
   margin-bottom: 6px
}

.vb-stat-card span {
   font-size: 11px;
   color: #667d90;
   font-weight: 700
}

.vb-section-intro {
   max-width: 760px;
   margin-bottom: 30px
}

.vb-section-intro .section-title {
   margin-bottom: 10px
}

.vb-section-label {
   font-size: 12px;
   font-weight: 800;
   color: #087bd1;
   text-transform: uppercase;
   letter-spacing: .1em
}

.vb-problem {
   position: relative;
   overflow: hidden;
   background: #fff;
   border: 1px solid #e1ebf1;
   border-radius: 18px;
   padding: 24px;
   min-height: 180px;
   transition: .25s
}

.vb-problem:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 34px rgba(5, 61, 121, .09);
   border-color: #c9dfef
}

.vb-problem .bi {
   font-size: 25px;
   color: #087bd1
}

.vb-problem h5 {
   font-size: 16px;
   font-weight: 800;
   color: #053d79;
   margin: 18px 0 8px
}

.vb-problem p {
   font-size: 12px;
   line-height: 1.65;
   color: #60778a;
   margin: 0
}

.vb-service-feature {
   height: 100%;
   position: relative;
   background: #fff;
   border: 1px solid #dce8f2;
   border-radius: 20px;
   padding: 27px;
   box-shadow: 0 8px 28px rgba(5, 61, 121, .045);
   transition: .25s
}

.vb-service-feature:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 42px rgba(5, 61, 121, .11)
}

.vb-service-feature .vb-service-num {
   position: absolute;
   right: 22px;
   top: 20px;
   font-size: 11px;
   font-weight: 900;
   color: #b8cfe0
}

.vb-service-feature .service-icon-box {
   margin-bottom: 20px
}

.vb-service-feature h3 {
   font-size: 20px;
   font-weight: 800;
   color: #053d79;
   margin-bottom: 8px
}

.vb-service-feature .problem {
   font-weight: 800;
   color: #315a77;
   font-size: 13px;
   margin-bottom: 9px
}

.vb-service-feature p {
   font-size: 13px;
   line-height: 1.7;
   color: #647a8c
}

.vb-service-feature ul {
   padding-left: 18px;
   margin: 15px 0 0;
   color: #47647b;
   font-size: 12px;
   line-height: 1.9
}

.vb-service-feature .techline {
   margin-top: 18px;
   padding-top: 14px;
   border-top: 1px solid #edf3f7;
   font-size: 10px;
   font-weight: 800;
   color: #087bd1;
   text-transform: uppercase;
   letter-spacing: .07em
}

.vb-outcome {
   height: 100%;
   padding: 26px;
   border-radius: 18px;
   background: linear-gradient(145deg, #053d79, #087bd1);
   color: #fff;
   position: relative;
   overflow: hidden
}

.vb-outcome:after {
   content: "";
   position: absolute;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   right: -70px;
   top: -80px;
   background: rgba(255, 255, 255, .09)
}

.vb-outcome h4 {
   font-size: 19px;
   font-weight: 800;
   margin: 0 0 9px;
   position: relative;
   z-index: 1
}

.vb-outcome p {
   font-size: 12px;
   line-height: 1.7;
   opacity: .9;
   position: relative;
   z-index: 1
}

.vb-proof {
   height: 100%;
   background: #fff;
   border: 1px solid #dce8f2;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 8px 28px rgba(5, 61, 121, .055)
}

.vb-proof img {
   width: 100%;
   height: 180px;
   object-fit: cover
}

.vb-proof-body {
   padding: 22px
}

.vb-proof-body .proof-type {
   font-size: 10px;
   font-weight: 900;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #087bd1
}

.vb-proof-body h4 {
   font-size: 18px;
   font-weight: 800;
   color: #053d79;
   margin: 7px 0
}

.vb-proof-body p {
   font-size: 12px;
   line-height: 1.65;
   color: #60778a
}

.vb-proof-link {
   font-size: 12px;
   font-weight: 800;
   color: #087bd1;
   text-decoration: none
}

.vb-process-card {
   height: 100%;
   padding: 24px;
   border: 1px solid #dce8f2;
   background: #fff;
   border-radius: 18px;
   position: relative
}

.vb-process-card .num {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: #e7f5ff;
   color: #087bd1;
   display: grid;
   place-items: center;
   font-weight: 900;
   font-size: 12px;
   margin-bottom: 17px
}

.vb-process-card h5 {
   font-size: 15px;
   font-weight: 800;
   color: #053d79
}

.vb-process-card p {
   font-size: 12px;
   line-height: 1.65;
   color: #60778a;
   margin: 0
}

.vb-industry-card {
   height: 100%;
   min-height: 250px;
   padding: 25px;
   border-radius: 18px;
   border: 1px solid #dce8f2;
   background: #fff;
   transition: .25s;
   position: relative;
   overflow: hidden
}

.vb-industry-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 38px rgba(5, 61, 121, .1);
   border-color: #c6ddec
}

.vb-industry-card .industry-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: #e8f5ff;
   color: #087bd1;
   display: grid;
   place-items: center;
   font-size: 22px;
   margin-bottom: 20px
}

.vb-industry-card h4 {
   font-size: 18px;
   font-weight: 800;
   color: #053d79
}

.vb-industry-card p {
   font-size: 12px;
   line-height: 1.7;
   color: #60778a
}

.vb-industry-card .mini-list {
   font-size: 11px;
   font-weight: 700;
   color: #315a77;
   line-height: 1.8
}

.vb-industry-card .arrow {
   position: absolute;
   right: 22px;
   bottom: 20px;
   color: #087bd1;
   font-weight: 900
}

.vb-journey {
   background: #f5f9fc;
   border: 1px solid #e1ebf2;
   border-radius: 22px;
   padding: 30px
}

.vb-journey h3 {
   font-size: 25px;
   font-weight: 800;
   color: #053d79
}

.vb-journey p {
   font-size: 13px;
   line-height: 1.7;
   color: #60778a
}

.vb-cta-panel {
   position: relative;
   overflow: hidden;
   border-radius: 22px;
   padding: 42px;
   background: linear-gradient(120deg, #053d79 0%, #087bd1 65%, #10a99b 100%);
   color: #fff
}

.vb-cta-panel:before {
   content: "";
   position: absolute;
   width: 280px;
   height: 280px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 50%;
   right: -70px;
   top: -150px
}

.vb-cta-panel h3 {
   font-size: 28px;
   font-weight: 800;
   margin-bottom: 9px;
   position: relative
}

.vb-cta-panel p {
   font-size: 13px;
   line-height: 1.7;
   opacity: .9;
   max-width: 700px;
   position: relative
}

.vb-cta-panel .btn {
   position: relative
}

.vb-page-hero {
   min-height: 390px !important;
   height: 390px !important;
   background-position: center !important
}

.vb-page-hero .page-hero-copy {
   max-width: 700px
}

.vb-page-hero h1 {
   font-size: 48px !important;
   line-height: 1.08 !important;
   text-shadow: 0 2px 18px rgba(0, 0, 0, .12)
}

.vb-page-hero p {
   font-size: 16px !important;
   line-height: 1.65 !important;
   max-width: 650px !important
}

.vb-page-hero .hero-pill {
   display: inline-block;
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .24);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   margin: 3px 5px 0 0
}

.vb-services-intro {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 40px;
   align-items: end
}

.vb-services-note {
   background: #f5f9fc;
   border: 1px solid #dce8f2;
   border-radius: 18px;
   padding: 23px
}

.vb-services-note strong {
   display: block;
   color: #053d79;
   font-size: 15px;
   margin-bottom: 8px
}

.vb-services-note p {
   font-size: 12px;
   color: #60778a;
   line-height: 1.7;
   margin: 0
}

.vb-industry-intro {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: 45px;
   align-items: center
}

.vb-industry-callout {
   background: linear-gradient(145deg, #053d79, #087bd1);
   border-radius: 20px;
   padding: 27px;
   color: #fff
}

.vb-industry-callout h3 {
   font-size: 20px;
   font-weight: 800
}

.vb-industry-callout p {
   font-size: 12px;
   line-height: 1.7;
   opacity: .9
}

.vb-industry-callout ul {
   padding-left: 17px;
   font-size: 11px;
   line-height: 2;
   opacity: .95
}

@media(max-width:991px) {

   .vb-services-intro,
   .vb-industry-intro {
      grid-template-columns: 1fr
   }

   .vb-page-hero {
      min-height: 360px !important;
      height: auto !important
   }

   .vb-page-hero h1 {
      font-size: 38px !important
   }
}

@media(max-width:575px) {
   .vb-page-hero h1 {
      font-size: 31px !important
   }

   .vb-page-hero p {
      font-size: 14px !important
   }

   .vb-cta-panel {
      padding: 28px
   }
}



/* Premium hero system */
.vb-home-hero {
   position: relative;
   overflow: hidden;
   padding: 74px 0 78px;
   background: linear-gradient(135deg, #f7fbfe 0%, #eef7fc 58%, #f9fcff 100%);
}

.vb-home-hero:before {
   content: "";
   position: absolute;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   right: -180px;
   top: -240px;
   background: rgba(8, 123, 209, .07)
}

.vb-home-grid {
   display: grid;
   grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
   gap: 56px;
   align-items: center
}

.vb-home-copy {
   position: relative;
   z-index: 2
}

.vb-home-copy .vb-kicker {
   margin-bottom: 16px
}

.vb-home-copy h1 {
   font-size: 56px;
   line-height: 1.04;
   letter-spacing: -.035em;
   color: #092f55;
   font-weight: 800;
   margin: 0 0 18px
}

.vb-home-copy h1 span {
   color: #087bd1
}

.vb-home-copy .hero-sub {
   font-size: 16px;
   line-height: 1.78;
   color: #526b80;
   max-width: 610px;
   margin: 0
}

.vb-home-image {
   position: relative
}

.vb-home-image-frame {
   position: relative;
   border-radius: 26px;
   overflow: hidden;
   background: #fff;
   border: 1px solid rgba(8, 123, 209, .15);
   box-shadow: 0 30px 70px rgba(5, 61, 121, .16)
}

.vb-home-image-frame img {
   display: block;
   width: 100%;
   height: 470px;
   object-fit: cover
}

.vb-home-image-frame:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 45%, rgba(5, 61, 121, .05))
}

.vb-floating-card {
   position: absolute;
   background: rgba(255, 255, 255, .96);
   border: 1px solid #e1edf4;
   border-radius: 14px;
   box-shadow: 0 14px 32px rgba(5, 61, 121, .13);
   padding: 13px 15px;
   z-index: 3
}

.vb-floating-card small {
   display: block;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-weight: 800;
   font-size: 8px;
   color: #7a90a2;
   margin-bottom: 4px
}

.vb-floating-card strong {
   font-size: 13px;
   color: #053d79
}

.vb-floating-top {
   top: 28px;
   right: -22px
}

.vb-floating-bottom {
   bottom: 28px;
   left: -25px
}

.vb-hero-capabilities {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 25px
}

.vb-hero-capabilities span {
   font-size: 10px;
   font-weight: 800;
   color: #315a77;
   background: #fff;
   border: 1px solid #dce8f2;
   border-radius: 999px;
   padding: 8px 11px
}

.vb-home-proof {
   padding: 0 0 28px;
   background: #f7fbfe
}

.vb-home-proof-inner {
   background: #fff;
   border: 1px solid #dfeaf2;
   border-radius: 16px;
   padding: 18px 22px;
   box-shadow: 0 10px 28px rgba(5, 61, 121, .06)
}

.vb-home-proof-label {
   font-size: 9px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: #7890a3
}

.vb-home-proof strong {
   font-size: 13px;
   color: #053d79
}

.vb-page-hero-premium {
   position: relative;
   overflow: hidden;
   padding: 58px 0 64px;
   background: #f4f9fc
}

.vb-page-hero-premium .vb-page-grid {
   display: grid;
   grid-template-columns: 1fr .92fr;
   gap: 55px;
   align-items: center
}

.vb-page-copy .vb-kicker {
   margin-bottom: 13px
}

.vb-page-copy h1 {
   font-size: 47px;
   line-height: 1.08;
   letter-spacing: -.03em;
   color: #092f55;
   font-weight: 800;
   margin: 0 0 15px
}

.vb-page-copy p {
   font-size: 15px;
   line-height: 1.75;
   color: #5a7184;
   max-width: 650px;
   margin: 0
}

.vb-page-image {
   position: relative
}

.vb-page-image img {
   width: 100%;
   height: 350px;
   display: block;
   object-fit: cover;
   border-radius: 24px;
   box-shadow: 0 24px 55px rgba(5, 61, 121, .14);
   border: 1px solid #dce8f2
}

.vb-page-image .image-tag {
   position: absolute;
   left: 20px;
   bottom: 18px;
   padding: 10px 13px;
   border-radius: 12px;
   background: rgba(5, 61, 121, .92);
   color: #fff;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .05em
}

.vb-hero-micro {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin-top: 22px
}

.vb-hero-micro span {
   font-size: 10px;
   font-weight: 800;
   color: #315a77;
   background: #fff;
   border: 1px solid #dce8f2;
   border-radius: 999px;
   padding: 8px 11px
}

.vb-page-breadcrumb {
   margin-top: 24px;
   font-size: 10px;
   color: #8194a4;
   font-weight: 700
}

.vb-page-breadcrumb a {
   color: #087bd1;
   text-decoration: none
}

.vb-contact-hero {
   position: relative;
   overflow: hidden;
   padding: 64px 0 70px;
   background: linear-gradient(135deg, #052f5d 0%, #075f9e 56%, #0a948e 100%);
   color: #fff
}

.vb-contact-hero:before {
   content: "";
   position: absolute;
   width: 620px;
   height: 620px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 50%;
   right: -230px;
   top: -270px
}

.vb-contact-grid {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 55px;
   align-items: center
}

.vb-contact-copy .vb-kicker {
   color: #9ce8e3
}

.vb-contact-copy .vb-kicker:before {
   background: #9ce8e3
}

.vb-contact-copy h1 {
   font-size: 50px;
   line-height: 1.08;
   letter-spacing: -.03em;
   font-weight: 800;
   margin: 0 0 16px
}

.vb-contact-copy p {
   font-size: 15px;
   line-height: 1.75;
   max-width: 620px;
   opacity: .9;
   margin: 0
}

.vb-contact-points {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin-top: 22px
}

.vb-contact-points span {
   font-size: 10px;
   font-weight: 800;
   padding: 8px 11px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .08)
}

.vb-contact-card {
   background: rgba(255, 255, 255, .97);
   border-radius: 20px;
   padding: 25px;
   color: #053d79;
   box-shadow: 0 24px 55px rgba(0, 0, 0, .16)
}

.vb-contact-card .icon {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: #e8f6ff;
   color: #087bd1;
   display: grid;
   place-items: center;
   font-size: 19px;
   margin-bottom: 14px
}

.vb-contact-card h3 {
   font-size: 20px;
   font-weight: 800;
   margin-bottom: 7px
}

.vb-contact-card p {
   font-size: 12px;
   line-height: 1.65;
   color: #60778a
}

.vb-contact-card .contact-row {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 12px 0;
   border-top: 1px solid #e8eef3
}

.vb-contact-card .contact-row i {
   color: #087bd1;
   margin-top: 2px
}

.vb-contact-card .contact-row strong {
   display: block;
   font-size: 11px;
   color: #315a77
}

.vb-contact-card .contact-row span {
   display: block;
   font-size: 11px;
   color: #708494;
   margin-top: 2px
}

@media(max-width:991px) {

   .vb-home-grid,
   .vb-page-hero-premium .vb-page-grid,
   .vb-contact-grid {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .vb-home-copy h1 {
      font-size: 44px
   }

   .vb-page-copy h1,
   .vb-contact-copy h1 {
      font-size: 40px
   }

   .vb-home-image-frame img {
      height: 380px
   }

   .vb-page-image img {
      height: 320px
   }

   .vb-floating-top {
      right: 15px
   }

   .vb-floating-bottom {
      left: 15px
   }
}

@media(max-width:575px) {

   .vb-home-hero,
   .vb-page-hero-premium,
   .vb-contact-hero {
      padding: 45px 0
   }

   .vb-home-copy h1 {
      font-size: 35px
   }

   .vb-page-copy h1,
   .vb-contact-copy h1 {
      font-size: 33px
   }

   .vb-home-image-frame img {
      height: 285px
   }

   .vb-page-image img {
      height: 245px
   }
}


/* 2026 visual polish: consistent image-led inner-page heroes and stronger case-study visuals */
.vb-page-hero {
   position: relative;
   background-size: cover !important;
   background-position: center !important;
}

.vb-page-hero:before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(90deg, rgba(3, 40, 78, .94) 0%, rgba(4, 66, 112, .78) 42%, rgba(4, 66, 112, .30) 72%, rgba(4, 66, 112, .12) 100%);
}

.vb-page-hero .container,
.vb-page-hero .page-hero-content,
.vb-page-hero .page-hero-copy {
   position: relative;
   z-index: 2
}

.vb-page-hero.about,
.vb-page-hero.cases,
.vb-page-hero.contact {
   color: #fff !important
}

.vb-page-hero.about {
   background-image: linear-gradient(90deg, rgba(3, 40, 78, .94), rgba(4, 66, 112, .72), rgba(4, 66, 112, .20)), url('about-hero.jpg') !important
}

.vb-page-hero.cases {
   background-image: linear-gradient(90deg, rgba(3, 40, 78, .94), rgba(4, 66, 112, .72), rgba(4, 66, 112, .20)), url('cases-hero.jpg') !important
}

.vb-page-hero.contact {
   background-image: linear-gradient(90deg, rgba(3, 40, 78, .94), rgba(4, 66, 112, .70), rgba(4, 66, 112, .18)), url('contact-hero.jpg') !important
}

.vb-page-hero.about h1,
.vb-page-hero.cases h1,
.vb-page-hero.contact h1 {
   color: #fff !important
}

.vb-page-hero.about p,
.vb-page-hero.cases p,
.vb-page-hero.contact p {
   color: rgba(255, 255, 255, .91) !important
}

.vb-page-hero .hero-pill {
   color: #fff !important;
   background: rgba(255, 255, 255, .12) !important;
   border-color: rgba(255, 255, 255, .28) !important;
   backdrop-filter: blur(5px)
}

.vb-page-hero .breadcrumbs {
   color: rgba(255, 255, 255, .78) !important
}

.vb-page-hero .breadcrumbs a {
   color: #b9f0ed !important
}

.vb-proof {
   transition: transform .25s ease, box-shadow .25s ease
}

.vb-proof:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 42px rgba(5, 61, 121, .12)
}

.vb-proof-media {
   height: 205px;
   position: relative;
   overflow: hidden;
   background: #052f5d
}

.vb-proof-media:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 50%, rgba(5, 61, 121, .18) 100%);
   pointer-events: none
}

.vb-proof-media img {
   width: 100%;
   height: 100%;
   object-fit: cover !important;
   object-position: center !important;
   display: block;
   transition: transform .45s ease
}

.vb-proof:hover .vb-proof-media img {
   transform: scale(1.045)
}

.vb-proof-body {
   min-height: 205px;
   display: flex;
   flex-direction: column
}

.vb-proof-link {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: 5px
}

@media(max-width:575px) {
   .vb-proof-media {
      height: 185px
   }

   .vb-page-hero {
      min-height: 330px !important;
      height: 330px !important
   }

   .vb-page-hero .page-hero-copy {
      padding-left: 0
   }
}

/* Contact hero matches the same full-width image hero height as Services and Industries. */
.vb-page-hero.contact {
   height: 390px !important;
   min-height: 390px !important
}

/* Corporate positioning refresh: team capability and sales proof */
.vb-team-card {
   background: linear-gradient(145deg, #f8fcff, #eef8fb) !important;
   border-color: #cfe2ee !important
}

.vb-team-section {
   padding: 10px 0 20px
}

.vb-team-skill {
   height: 100%;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 17px 18px;
   border: 1px solid #dce8f2;
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 7px 22px rgba(5, 61, 121, .045);
   transition: .22s
}

.vb-team-skill:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 30px rgba(5, 61, 121, .09);
   border-color: #bfd8e8
}

.vb-team-skill>span {
   width: 43px;
   height: 43px;
   flex: 0 0 43px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #e8f5ff;
   color: #087bd1;
   font-weight: 900;
   font-size: 12px
}

.vb-team-skill strong {
   display: block;
   color: #053d79;
   font-size: 13px;
   font-weight: 800
}

.vb-team-skill small {
   display: block;
   color: #708494;
   font-size: 10px;
   margin-top: 3px;
   line-height: 1.35
}

.vb-stat-card strong {
   font-variant-numeric: tabular-nums
}

@media(max-width:575px) {
   .vb-team-skill {
      padding: 14px
   }

   .vb-team-skill>span {
      width: 39px;
      height: 39px;
      flex-basis: 39px
   }
}

/* =========================================================
   VB Brand Refinement — #087BD1 / no hero gradients
   ========================================================= */
:root {
   --blue: #087bd1;
   --blue2: #087bd1;
   --navy: #063d73;
   --ink: #163b5b;
   --text: #425f78;
   --light: #f4f9fd;
   --line: #d8e8f4;
   --muted: #6d8498;
   --vb-teal: #087bd1
}

.btn-vbb {
   background: #087bd1 !important;
   border-color: #087bd1 !important;
   box-shadow: 0 6px 14px rgba(8, 123, 209, .18) !important
}

.btn-outline-vbb {
   border-color: #087bd1 !important;
   color: #087bd1 !important
}

.btn-outline-vbb:hover {
   background: #087bd1 !important;
   color: #fff !important
}

.nav-link:hover,
.nav-link.active {
   color: #087bd1 !important
}

.nav-link.active:after {
   background: #087bd1 !important
}

.eyebrow,
.kicker,
.case-tag,
.card-link,
.case-link {
   color: #087bd1 !important
}

.icon-circle,
.icon-tile,
.icon-blue {
   background: #e8f4fd !important;
   color: #087bd1 !important
}

/* No gradients in any hero: image + solid translucent blue overlay only. */
.positioning-hero {
   background: #063d73 !important
}

.positioning-hero:after {
   background: rgba(4, 55, 100, .72) !important
}

.positioning-hero .hero-bg {
   opacity: .48 !important
}

.page-hero {
   background-color: #063d73 !important
}

.page-hero.about,
.page-hero.cases,
.page-hero.contact {
   color: #fff !important
}

.page-hero.about h1,
.page-hero.cases h1,
.page-hero.contact h1,
.page-hero.about p,
.page-hero.cases p,
.page-hero.contact p {
   color: #fff !important
}

.cta {
   background: #063d73 !important
}

footer {
   background: #063d73 !important
}

.timeline-vbb::before {
   background: #087bd1 !important
}

/* Keep supporting cards flat and corporate; gradients are intentionally avoided. */
.vb-outcome,
.vb-cta-panel,
.vb-industry-callout {
   background: #063d73 !important
}

.vb-page-hero.about,
.vb-page-hero.cases,
.vb-page-hero.contact {
   background-image: none !important;
   background-color: #063d73 !important
}

.vb-page-hero.about::before,
.vb-page-hero.cases::before,
.vb-page-hero.contact::before {
   background: rgba(4, 55, 100, .70) !important
}

/* Refined section headings */
.section-head {
   display: block;
   max-width: 820px;
   margin-bottom: 28px;
}

.section-head .kicker {
   margin-bottom: 8px;
}

.section-head h2 {
   margin: 0 0 10px;
   color: #123b5d;
   font-size: clamp(26px, 3vw, 36px);
   line-height: 1.16;
   font-weight: 800;
   letter-spacing: -.028em;
}

.section-head p {
   max-width: 720px;
   margin: 0;
   color: #667f95;
   font-size: 14px;
   line-height: 1.7;
}

.section-head a {
   display: inline-flex;
   margin-top: 14px;
}

@media (max-width: 767px) {
   .section-head {
      margin-bottom: 22px;
   }

   .section-head h2 {
      font-size: 27px;
   }

   .section-head p {
      font-size: 13px;
   }
}