/* ============================================================
   GLOBAL STYLE — CodeVision Front Page
   Depends on: global-variables.css, bootstrap.min.css
   ============================================================ */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0
}

html,
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
  color: var(--primary-dark);
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

a {
  text-decoration: none;
  cursor: pointer
}

a:-webkit-any-link:focus-visible {
  outline: 0
}

ul {
  list-style: none
}
/* ====================
   HEADINGS (DESKTOP)
==================== */

h1 {
  font-size: var(--font-size-72);
  font-family: var(--font-extrabold);
  line-height: 1.1;
}

h2 {
  font-size: var(--font-size-48);
  font-family: var(--font-extrabold);
  line-height: 1.2;
}

h3 {
  font-size: var(--font-size-32);
  font-family: var(--font-extrabold);
}

h4 {
  font-size: var(--font-size-24);
  font-family: var(--font-extrabold);
}

h5 {
  font-size: var(--font-size-18);
  font-family: var(--font-bold);
}

h6 {
  font-size: var(--font-size-16);
  font-family: var(--font-semibold);
}

/* ====================
   BODY TEXT
==================== */

.body-lg {
  font-size: var(--font-size-20);
  font-family: var(--font-regular);
}

p {
  font-size: var(--font-size-16);
  font-family: var(--font-regular);
}

.small-text {
  font-size: var(--font-size-12);
  font-family: var(--font-regular);
}


/* ====================
   TABLET (≤ 991px)
==================== */

@media (max-width: 991px) {

  h1 { font-size: var(--font-size-56); }
  h2 { font-size: var(--font-size-40); }
  h3 { font-size: var(--font-size-28); }
  h4 { font-size: var(--font-size-24); }
  h5 { font-size: var(--font-size-17); }
  h6 { font-size: var(--font-size-15); }

  .body-lg { font-size: var(--font-size-18); }
}


/* ====================
   MOBILE (≤ 767px)
==================== */

@media (max-width: 767px) {

  h1 { font-size: var(--font-size-40); }
  h2 { font-size: var(--font-size-32); }
  h3 { font-size: var(--font-size-24); }
  h4 { font-size: var(--font-size-20); }
  h5 { font-size: var(--font-size-16); }
  h6 { font-size: var(--font-size-14); }

  .body-lg { font-size: var(--font-size-17); }

  p {
    font-size: var(--font-size-16);
  }

  .small-text {
    font-size: var(--font-size-12);
  }
}


/* ============================================================
   ===== HERO SECTION
============================================================ */

.hero-section {
    background: radial-gradient(circle, var(--bg-overlay) 0%, rgba(0, 161, 241, 0) 100%);
    background-color: var(--bg-hero);
    padding: var(--spacing-2xl) 0 var(--spacing-2xl);
    position: relative;
}

/* Tighter gutter between the content and image columns */
.hero-section .row {
    --bs-gutter-x: 1rem;
}

/* --- Subtitle Capsule --- */

.hero-section__subtitle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--hero-subtitle-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-13);
    font-family: var(--font-semibold);
    color: var(--color-desc);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
}

.hero-section__subtitle-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--secondary-green);
    flex-shrink: 0;
}

/* --- Heading --- */

.hero-section__heading {
    font-size: var(--font-size-54);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1.05;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 20px;
}

.hero-section__heading-highlight {
    color: var(--primary-color);
}

/* --- Description --- */

.hero-section__desc {
    font-size: var(--font-size-18);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    max-width: 540px;
    margin-bottom: 30px;
}

/* Home hero only — .hero-section__desc is also reused (with its own
   .sibp-desc font-size) on the Solutions page hero, so the smaller
   size here is scoped to #hero-section instead of the shared class. */
#hero-section .hero-section__desc {
    font-size: var(--font-size-16);
    line-height: var(--line-height-normal);
}

/* --- Buttons --- */

.hero-banner-primary,
.hero-banner-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-16);
    font-family: var(--font-semibold);
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
    cursor: pointer;
}

.hero-banner-primary {
    background-color: var(--primary-color);
    color: var(--color-white);
    border-color: var(--primary-color);
}

.hero-banner-primary:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 161, 241, 0.40);
}

.hero-banner-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 161, 241, 0.30);
}

.hero-banner-secondary {
    background-color: var(--color-white);
    color: var(--bg-dark);
    border-color: var(--color-border-button);
}

.hero-banner-secondary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(49, 43, 43, 0.18);
}

.hero-banner-secondary:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 43, 43, 0.12);
}

/* --- Divider --- */

.hero-section__divider {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border-top: 1px solid var(--color-divider);
}

/* --- Counter Stats --- */

.hero-section__counter-item {
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-md);
    min-width: 0;
}

.hero-section__counter-number-wrap {
    gap: 2px;
    line-height: 1;
}

.hero-section__counter-number,
.hero-section__counter-number--static {
    font-size: var(--font-size-26);
    font-family: var(--font-extrabold);
    color: var(--primary-dark);
    line-height: 1;
}

.hero-section__counter-suffix {
    font-size: var(--font-size-20);
    font-family: var(--font-extrabold);
    color: var(--bg-dark);
    margin-left: 2px;
    line-height: 1;
}

.hero-section__counter-label {
    font-size: var(--font-size-13);
    font-family: var(--font-regular);
    color: var(--color-body-text);
    margin-top: var(--spacing-xs);
    white-space: nowrap;
}

.hero-section__counter-sep {
    width: 1px;
    height: 32px;
    background-color: var(--color-divider);
    margin-right: var(--spacing-md);
    flex-shrink: 0;
    align-self: center;
}
.hero-section__counters {
    row-gap: var(--spacing-md);
}
/* --- Right Image Area --- */

.hero-section__image-wrap {
    position: relative;
    width: 100%;
    user-select: none;
    --orbit-radius: 160px;
    --orbit-icon-size: 85px;
}

.hero-section__img {
    width: 100%;
    display: block;
}

.hero-section__img--base {
    position: relative;
    z-index: 1;
}

/* --- Float Cards --- */

.hero-section__float-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 10px 14px;
    z-index: 4;
    white-space: nowrap;
}

.hero-section__float-card--top {
    top: 9%;
    left: 14%;
    animation: hero-card-float 3.2s ease-in-out infinite;
}

.hero-section__float-card--bottom {
    bottom: 4%;
    left: 40%;
    transform: translateX(-50%);
    animation: hero-card-float-centered 3.2s ease-in-out 1.6s infinite;
}

.hero-section__float-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section__float-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-section__float-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-section__float-card-label {
    font-size: var(--font-size-12);
    font-family: var(--font-semibold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    line-height: 1.2;
}

.hero-section__float-card-value {
    font-size: var(--font-size-15);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1.2;
}

@keyframes hero-card-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

@keyframes hero-card-float-centered {
    0%, 100% { transform: translateX(-58%) translateY(0); }
    50%       { transform: translateX(-58%) translateY(-10px); }
}

/* --- Orbit Icons --- */

.hero-section__orbit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--orbit-icon-size);
    height: var(--orbit-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: default;
}

.hero-section__orbit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Tooltip */

.hero-section__orbit-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: var(--font-size-18);
    font-family: var(--font-semibold);
    padding: 10px 25px;
    border-radius: 30px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 10;
}

.hero-section__orbit-icon:hover::after {
    opacity: 1;
}

/* Each icon starts at a different angle (360 / 5 = 72° apart).
   The counter-rotate keeps the icon upright while its position orbits. */

.hero-section__orbit-icon--1 { animation: hero-orbit-0   20s linear infinite; }
.hero-section__orbit-icon--2 { animation: hero-orbit-72  20s linear infinite; }
.hero-section__orbit-icon--3 { animation: hero-orbit-144 20s linear infinite; }
.hero-section__orbit-icon--4 { animation: hero-orbit-216 20s linear infinite; }
.hero-section__orbit-icon--5 { animation: hero-orbit-288 20s linear infinite; }

/* --- Keyframes --- */

@keyframes hero-orbit-0 {
    from { transform: translate(-50%, -50%) rotate(0deg)   translateX(var(--orbit-radius)) rotate(0deg);    }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); }
}
@keyframes hero-orbit-72 {
    from { transform: translate(-50%, -50%) rotate(72deg)  translateX(var(--orbit-radius)) rotate(-72deg);  }
    to   { transform: translate(-50%, -50%) rotate(432deg) translateX(var(--orbit-radius)) rotate(-432deg); }
}
@keyframes hero-orbit-144 {
    from { transform: translate(-50%, -50%) rotate(144deg) translateX(var(--orbit-radius)) rotate(-144deg); }
    to   { transform: translate(-50%, -50%) rotate(504deg) translateX(var(--orbit-radius)) rotate(-504deg); }
}
@keyframes hero-orbit-216 {
    from { transform: translate(-50%, -50%) rotate(216deg) translateX(var(--orbit-radius)) rotate(-216deg); }
    to   { transform: translate(-50%, -50%) rotate(576deg) translateX(var(--orbit-radius)) rotate(-576deg); }
}
@keyframes hero-orbit-288 {
    from { transform: translate(-50%, -50%) rotate(288deg) translateX(var(--orbit-radius)) rotate(-288deg); }
    to   { transform: translate(-50%, -50%) rotate(648deg) translateX(var(--orbit-radius)) rotate(-648deg); }
}

/* --- Responsive: ≤ 1440px --- */

@media (max-width: 1440px) {

    .hero-section__heading {
        font-size: var(--font-size-52);
    }

    .hero-section__image-wrap {
        --orbit-radius: 150px;
        --orbit-icon-size: 80px;
    }
    .hero-section__counter-sep {
        margin-right: var(--spacing-sm);
    }
    .hero-section__counter-label {
        font-size: var(--font-size-12);
    }
    .hero-section__counter-number, .hero-section__counter-number--static {
        font-size: var(--font-size-22);
    }
    .hero-section__counter-item {
        padding-right: var(--spacing-sm);
    }
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .hero-section {
        padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    .hero-section__heading {
        font-size: var(--font-size-44);
    }

    .hero-section__image-wrap {
        --orbit-radius: 110px;
        --orbit-icon-size: 76px;
    }
    .hero-section__float-card--top {
        top: 0%;
        left: 8%;
    }
    .hero-section__float-card--bottom {
        bottom: -4%;
        left: 40%;
    }

    .hero-banner-primary,
    .hero-banner-secondary {
        padding: 11px 24px;
        font-size: var(--font-size-14);
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .hero-section {
        padding: 110px 0 90px;
    }

    .hero-section__content {
        text-align: center;
    }

    .hero-section__heading {
        font-size: var(--font-size-40);
    }

    .hero-section__desc {
        font-size: var(--font-size-16);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-section__image-wrap {
        max-width: 460px;
        margin: 0 auto;
        --orbit-radius: 110px;
        --orbit-icon-size: 64px;
    }

    .hero-section__float-card {
        padding: 8px 11px;
        gap: 8px;
    }

    .hero-section__float-card-icon {
        width: 32px;
        height: 32px;
    }

    .hero-section__float-card-value {
        font-size: var(--font-size-13);
    }

    .hero-section__counters {
        justify-content: center;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
    .hero-button-section {
        justify-content: center;
    }

    .hero-banner-primary,
    .hero-banner-secondary {
        padding: 10px 22px;
        font-size: var(--font-size-14);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {
    .hero-section__heading {
        font-size: var(--font-size-32);
    }

    .hero-section__image-wrap {
        --orbit-radius: 96px;
        --orbit-icon-size: 54px;
    }

    .hero-section__float-card {
        padding: 7px 10px;
        gap: 7px;
    }

    .hero-section__float-card-icon {
        width: 26px;
        height: 26px;
    }

    .hero-section__float-card-label {
        font-size: var(--font-size-11);
    }

    .hero-section__float-card-value {
        font-size: var(--font-size-13);
    }

    .hero-banner-primary,
    .hero-banner-secondary {
        padding: 10px 20px;
        font-size: var(--font-size-14);
    }

    .hero-section__counter-sep {
        display: none;
    }

    .hero-section__counter-item {
        flex: 0 0 calc(50% - var(--spacing-sm));
        align-items: center;
        padding-right: 0;
        padding: var(--spacing-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        text-align: center;
    }

    .hero-section__counters {
        gap: var(--spacing-sm);
    }

    .hero-section__counter-label {
        white-space: normal;
        font-size: var(--font-size-12);
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .hero-section__heading {
        font-size: var(--font-size-26);
    }

    .hero-section__counter-item {
        flex: 0 0 calc(50% - var(--spacing-xs));
    }

    .hero-section__image-wrap {
        --orbit-radius: 76px;
        --orbit-icon-size: 44px;
    }

    .hero-section__float-card {
        padding: 6px 9px;
        gap: 6px;
        border-radius: var(--radius-lg);
    }

    .hero-section__float-card-icon {
        width: 22px;
        height: 22px;
    }

    .hero-section__float-card-label {
        display: none;
    }

    .hero-section__float-card-value {
        font-size: var(--font-size-12);
    }

    .hero-banner-primary,
    .hero-banner-secondary {
        padding: 9px 18px;
        font-size: var(--font-size-13);
    }
}

/* --- Reduced motion accessibility --- */

@media (prefers-reduced-motion: reduce) {

    .hero-section__float-card--top    { animation: none; }
    .hero-section__float-card--bottom { animation: none; transform: translateX(-58%); }

    .hero-section__orbit-icon--1 { animation: none; transform: translate(-50%, -50%) translateX(var(--orbit-radius)); }
    .hero-section__orbit-icon--2 { animation: none; transform: translate(-50%, -50%) rotate(72deg)  translateX(var(--orbit-radius)) rotate(-72deg);  }
    .hero-section__orbit-icon--3 { animation: none; transform: translate(-50%, -50%) rotate(144deg) translateX(var(--orbit-radius)) rotate(-144deg); }
    .hero-section__orbit-icon--4 { animation: none; transform: translate(-50%, -50%) rotate(216deg) translateX(var(--orbit-radius)) rotate(-216deg); }
    .hero-section__orbit-icon--5 { animation: none; transform: translate(-50%, -50%) rotate(288deg) translateX(var(--orbit-radius)) rotate(-288deg); }
}

/* ===== END HERO SECTION ===== */

/* ============================================================
   ===== COMMON CSS CODE START
============================================================ */
.max-width-600 {
    max-width: 600px;
}
.bg-white {
    background-color: var(--color-white) !important;
}
/* ============================================================
   ===== COMMON CSS CODE END 
============================================================ */

/* ============================================================
   ===== COMMON PADDING UTILITY
============================================================ */

.common-padding {
    padding-top: var(--spacing-2xl);    /* 64px, was 100px */
    padding-bottom: var(--spacing-2xl);
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1199px) {
    .common-padding {
        padding-top: var(--spacing-2xl);   /* 48px, was 80px */
        padding-bottom: var(--spacing-2xl);
    }
}

@media (max-width: 991px) {
    .common-padding {
        padding-top: var(--spacing-40);    /* 40px, was 60px */
        padding-bottom: var(--spacing-40);
    }
}

@media (max-width: 767px) {
    .common-padding {
        padding-top: var(--spacing-xl);    /* 32px, was 50px */
        padding-bottom: var(--spacing-xl);
    }
}

@media (max-width: 575px) {
    .common-padding {
        padding-top: var(--spacing-lg);    /* 24px, was 40px */
        padding-bottom: var(--spacing-lg);
    }
}

/* ===== END COMMON PADDING UTILITY ===== */

/* ===== Common Container width start ===== */
@media only screen and (min-width: 1200px) and (max-width: 1400px)  {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 100% !important;
    padding: 0px 54px !important;
  }
}
@media only screen and (min-width: 1401px) and (max-width: 1600px)  {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 100% !important;
     padding: 0px 100px !important;
    }
}
@media only screen and (min-width: 1601px) and (max-width: 1700px)  {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 100% !important;
     padding: 0px 120px !important;
    }
}
@media only screen and (min-width: 1701px) and (max-width: 1920px)  {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 100% !important;
     padding: 0px 200px !important;
    }
}
/* ===== Common Container width end ===== */


/* ============================================================
   ===== COMMON CLASS
============================================================ */

/* Common Class */

.section-title {
    font-size: var(--font-size-40);          /* was 48px — website-wide compaction */
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-xl);         /* 32px, was 60px */
}

.section-title-highlight {
    color: var(--primary-color);
}

.max-width-section-title {
    max-width: 1170px;
}

.bg-card {
    background-color: var(--bg-card) !important;
}

/* --- Responsive: ≤ 1440px --- */

@media (max-width: 1440px) {

    .section-title {
        font-size: var(--font-size-36);       /* was 44px */
    }
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .section-title {
        font-size: var(--font-size-32);       /* was 40px */
        margin-bottom: var(--spacing-lg);     /* 24px, was 48px */
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .section-title {
        font-size: var(--font-size-28);       /* was 36px */
        margin-bottom: var(--spacing-md);     /* 16px, was 32px */
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .section-title {
        font-size: var(--font-size-26);       /* was 32px */
        margin-bottom: var(--spacing-md);     /* 16px, was 24px */
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .section-title {
        font-size: var(--font-size-24);       /* was 28px */
        margin-bottom: var(--spacing-sm);     /* 8px, was 16px */
    }
}

/* --- Owl Carousel — Global Nav & Dot Style --- */

.owl-theme .owl-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
}

.owl-theme .owl-nav [class*='owl-'] {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background-color: transparent !important;
    border: 2px solid var(--primary-color) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
}

/* Blue arrow — visible in normal state */
.owl-theme .owl-nav [class*='owl-']::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../cv-images/arrow-blue.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px auto;
    opacity: 1;
    transition: opacity var(--transition-base);
}

/* White arrow — fades in on hover */
.owl-theme .owl-nav [class*='owl-']::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../cv-images/arrow-white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px auto;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.owl-theme .owl-nav [class*='owl-']:hover::before {
    opacity: 0;
}

.owl-theme .owl-nav [class*='owl-']:hover::after {
    opacity: 1;
}

/* Prev: blue(←) stays as-is; white(→) flipped to point left */
.owl-theme .owl-nav .owl-prev::after {
    transform: scaleX(-1);
}

/* Next: blue(←) flipped to point right; white(→) stays as-is */
.owl-theme .owl-nav .owl-next::before {
    transform: scaleX(-1);
}

.owl-theme .owl-nav [class*='owl-'] i,
.owl-theme .owl-nav [class*='owl-'] span {
    display: none;
}

.owl-theme .owl-dots {
    display: none;
}

.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    margin: 0;
    transition: width var(--transition-base), background-color var(--transition-base);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    width: 24px;
    background-color: var(--primary-color);
    opacity: 1;
}

@media (max-width: 767px) {

    .owl-theme .owl-nav {
        display: flex;
        justify-content: center;
    }
}

/* --- Section Description --- */

.section-desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    margin-bottom: var(--spacing-40);
}

/* --- Section Explore Link --- */

.cv-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-16);
    font-family: var(--font-semibold);
        color: var(--bg-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-base);
}

.cv-section-link:hover {
    color: var(--primary-color-dark);
}

.cv-section-link__icon {
    display: inline-block;
    transition: transform var(--transition-base);
}

.cv-section-link:hover .cv-section-link__icon {
    transform: translateX(5px);
}

/* --- Primary Button --- */

.cv-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: var(--spacing-10) var(--spacing-card-p);
    background-color: var(--primary-color);
    color: var(--color-white);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-18);
    font-family: var(--font-bold);
    line-height: var(--line-height-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base);
}

.cv-primary-button:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 161, 241, 0.40);
}

.cv-primary-button:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 161, 241, 0.30);
}

@media (max-width: 1199px) {
    .cv-primary-button {
        font-size: var(--font-size-17);
        padding: var(--spacing-10) var(--spacing-lg);
    }
}

@media (max-width: 991px) {
    .cv-primary-button {
        font-size: var(--font-size-16);
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    .cv-primary-button {
        font-size: var(--font-size-15);
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* --- Secondary Button --- */

.cv-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: var(--spacing-10) var(--spacing-card-p);
    background-color: var(--color-white);
    color: var(--primary-dark);
    border: 2px solid var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-18);
    font-family: var(--font-bold);
    line-height: var(--line-height-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

.cv-secondary-button:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(49, 43, 43, 0.18);
}

.cv-secondary-button:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 43, 43, 0.12);
}

@media (max-width: 1199px) {
    .cv-secondary-button {
        font-size: var(--font-size-17);
        padding: var(--spacing-10) var(--spacing-lg);
    }
}

@media (max-width: 991px) {
    .cv-secondary-button {
        font-size: var(--font-size-16);
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    .cv-secondary-button {
        font-size: var(--font-size-15);
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ===== END COMMON CLASS ===== */


/* ============================================================
   ===== THREE-PATH NAVIGATOR SECTION
============================================================ */

/* --- Card --- */

.three-path-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-p);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.three-path-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* --- Card Image --- */

.three-path-card__img-wrap {
    margin-bottom: var(--spacing-card-item-mb);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.three-path-card__img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* --- Card Title --- */

.three-path-card__title {
    font-size: var(--font-size-24);
    font-family: var(--font-extrabold);
    color: var(--primary-dark);
    line-height: 1.3;
    margin-bottom: var(--spacing-card-item-mb);
}

/* --- Card Description --- */

.three-path-card__desc {
    font-size: var(--font-size-20);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-card-item-mb);
}

/* --- Card Link --- */

.cv-common-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-16);
    font-family: var(--font-semibold);
    color: var(--bg-dark);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition-base);
}

.cv-common-link:hover {
    color: var(--primary-color);
}

.cv-common-link__icon {
    display: inline-block;
    transition: transform var(--transition-base);
}

.cv-common-link:hover .cv-common-link__icon {
    transform: translateX(5px);
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .three-path-card__desc {
        font-size: var(--font-size-18);
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .three-path-card__desc {
        font-size: var(--font-size-17);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .three-path-card {
        padding: var(--spacing-xl);
        border-radius: var(--radius-2xl);
    }

    .three-path-card__desc {
        font-size: var(--font-size-16);
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .three-path-card {
        padding: var(--spacing-lg);
    }
}

/* --- Compact Layout Override ---
   Scoped to `.three-path-section` only. `.three-path-card__title` /
   `__desc` are shared with other sections (e.g. the Marquee Solution
   Highlights cards reuse them), so every rule below is written as a
   `.three-path-section …` descendant selector — it never touches the
   shared base rules or any other section. Section padding and the
   heading (`.section-title`) are NOT overridden here — both now come
   straight from their shared, already-compacted base rules, so every
   section benefits together instead of needing one-off per-section
   rules. */

.three-path-section .three-path-card {
    padding: var(--spacing-20);
    border-radius: var(--radius-2xl);
}

.three-path-section .three-path-card__img-wrap {
    margin-bottom: var(--spacing-md);
}

.three-path-section .three-path-card__title {
    font-size: var(--font-size-20);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

.three-path-section .three-path-card__desc {
    font-size: var(--font-size-16);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 991px) {
    .three-path-section .three-path-card__desc {
        font-size: var(--font-size-15);
    }
}

@media (max-width: 767px) {
    .three-path-section .three-path-card {
        padding: var(--spacing-20);
        border-radius: var(--radius-xl);
    }
}

@media (max-width: 575px) {
    .three-path-section .three-path-card {
        padding: var(--spacing-md);
    }
}

/* ===== END THREE-PATH NAVIGATOR SECTION ===== */


/* ============================================================
   ===== MARQUEE SOLUTION HIGHLIGHTS SECTION
============================================================ */

/* --- Section Background --- */

.msh-section {
    background-color: var(--bg-card);
}

/* --- Base Card --- */

.msh-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-card);
    padding: var(--spacing-card-p);
    height: 100%;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.msh-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* --- Horizontal Card (large, content left + image right) --- */

.msh-card--horizontal {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-xl);
    background: linear-gradient(135deg, var(--color-white) 0%, var(--bg-card-gradient-end) 100%);
}

.msh-card--horizontal .msh-card__content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
    min-width: 0;
}

.msh-card--horizontal .msh-card__content .three-path-card__title,
.msh-card--horizontal .msh-card__content .three-path-card__desc,
.msh-card--horizontal .msh-card__content .cv-common-link {
    margin-top: 0;
    margin-bottom: 0;
}

.msh-card--horizontal .msh-card__img-wrap {
    flex: 1;
    min-width: 0;
    min-height: 240px;
    border-radius: var(--radius-logo);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msh-card--horizontal .msh-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: var(--radius-logo);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* --- Vertical Card (content top + image bottom) --- */

.msh-card--vertical {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--bg-card-gradient-end) 100%);
}

.msh-card--vertical .cv-common-link {
    margin-top: 0;
}

.msh-card__img-wrap--bottom {
    margin-top: auto;
    padding-top: var(--spacing-xl);
    border-radius: var(--radius-logo);
    overflow: hidden;
}

.msh-card__img-wrap--bottom .msh-card__img {
    width: 100%;
    display: block;
    border-radius: var(--radius-logo);
}

/* --- Responsive: ≤ 1440px --- */

@media (max-width: 1440px) {

    .msh-card--horizontal .msh-card__content {
        flex: 0 0 48%;
    }
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .msh-card--horizontal {
        gap: var(--spacing-lg);
    }

    .msh-card--horizontal .msh-card__content {
        flex: 0 0 50%;
    }
}

/* --- Responsive: ≤ 991px — stack horizontal cards --- */

@media (max-width: 991px) {

    .msh-card--horizontal {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .msh-card--horizontal .msh-card__content {
        flex: none;
        width: 100%;
    }

    .msh-card--horizontal .msh-card__img-wrap {
        width: 100%;
        min-height: 220px;
        margin-top: var(--spacing-lg);
    }

    .msh-card__img-wrap--bottom {
        min-height: 180px;
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .msh-card {
        padding: var(--spacing-xl);
        border-radius: var(--radius-2xl);
    }

    .msh-card--horizontal .msh-card__img-wrap {
        min-height: 180px;
    }

    .msh-card__img-wrap--bottom {
        min-height: 150px;
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .msh-card {
        padding: var(--spacing-lg);
    }

    .msh-card--horizontal .msh-card__img-wrap {
        min-height: 150px;
    }

    .msh-card__img-wrap--bottom {
        min-height: 130px;
    }
}

/* --- Compact Layout Override ---
   Scoped to `.msh-section` only. `.three-path-card__title` / `__desc`
   are shared with the Three-Path Navigator section, so they're
   overridden here as `.msh-section …` descendant selectors — this
   never touches the shared base rules or the Three-Path section.
   Section padding and the heading (`.section-title`) already come
   from their shared, compacted base rules, so they don't need a
   rule here either. */

.msh-section .msh-card {
    padding: var(--spacing-20);
    border-radius: var(--radius-2xl);
}

.msh-section .msh-card--horizontal {
    gap: var(--spacing-lg);
}

.msh-section .msh-card--horizontal .msh-card__content {
    gap: var(--spacing-sm);
}

.msh-section .msh-card--horizontal .msh-card__img-wrap {
    min-height: 150px;
}

.msh-section .msh-card__img-wrap--bottom {
    margin-top: auto;
    padding-top: var(--spacing-xl);
}

.msh-section .three-path-card__title {
    font-size: var(--font-size-20);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

.msh-section .three-path-card__desc {
    font-size: var(--font-size-16);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 991px) {
    .msh-section .three-path-card__desc {
        font-size: var(--font-size-15);
    }
    .msh-section .msh-card--horizontal .msh-card__img-wrap {
        min-height: 140px;
    }
}

@media (max-width: 767px) {
    .msh-section .msh-card {
        padding: var(--spacing-20);
    }
    .msh-section .msh-card--horizontal .msh-card__img-wrap {
        min-height: 120px;
    }
}

@media (max-width: 575px) {
    .msh-section .msh-card {
        padding: var(--spacing-md);
    }
    .msh-section .msh-card--horizontal .msh-card__img-wrap {
        min-height: 110px;
    }
}

/* ===== END MARQUEE SOLUTION HIGHLIGHTS SECTION ===== */


/* ============================================================
   ===== INDUSTRY SECTION
============================================================ */

/* --- Section Description --- */

.industry-section__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-40);
}

/* --- Carousel Wrapper --- */

.industry-carousel {
    position: relative;
    padding-bottom: 56px;
}

/* --- Card Base --- */

.industry-card {
    padding: var(--spacing-20);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 120px;
}

/* --- Card Background Color Cycle (nth-child on .owl-item for ACF compatibility) --- */

.industry-carousel .owl-stage .owl-item:nth-child(4n+1) .industry-card { background-color: var(--bg-overlay); }
.industry-carousel .owl-stage .owl-item:nth-child(4n+2) .industry-card { background-color: var(--bg-overlay-red); }
.industry-carousel .owl-stage .owl-item:nth-child(4n+3) .industry-card { background-color: var(--bg-overlay-green); }
.industry-carousel .owl-stage .owl-item:nth-child(4n+4) .industry-card { background-color: var(--bg-overlay-yellow); }

/* --- Icon Container --- */

.industry-card__icon-wrap {
    background-color: var(--color-white);
    padding: 10px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
}

.industry-card__icon {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

/* --- Card Title --- */

.industry-card__title {
    font-size: var(--font-size-16);
    font-family: var(--font-bold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin: 0;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* --- Owl: Equal-height items --- */

.industry-carousel .owl-item {
    display: flex;
}

.industry-carousel .owl-item > .industry-card {
    width: 100%;
}

/* --- Owl: Dots (pill style, bottom-left) --- */

.industry-carousel .owl-dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
}

/* --- Owl: Nav arrows positioning (bottom-right) --- */

.industry-carousel .owl-nav {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .industry-card {
        padding: var(--spacing-md);
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .industry-section__desc {
        margin-bottom: var(--spacing-2xl);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .industry-card {
        padding: var(--spacing-lg);
    }

    .industry-carousel {
        padding-bottom: 48px;
    }

    .industry-carousel .owl-nav {
        position: absolute;
        left: 0;
        right: 0;
        justify-content: center;
    }
}

/* ===== END INDUSTRY SECTION ===== */

/* ============================================================
   ===== WHY CHOOSE US SECTION
============================================================ */

/* --- Compact Layout Override (reduced height, reused sitewide) --- */

.wcu-section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

/* --- Section Header --- */

.wcu-section__header {
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
}

.wcu-section .section-title {
    margin-bottom: var(--spacing-sm);
}

.wcu-section__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* --- Main Image --- */

.wcu-section__img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Main Row --- */

.wcu-section__main-row {
    margin-bottom: var(--spacing-xl);
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Nested cards row (icon+title cards grid) */
.wcu-section__main-row .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* --- Feature Cards --- */
/* Card is a wrapping flex row: icon + title sit side by side (row 1),
   description is forced to its own line via flex-basis: 100% */

.wcu-feature-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    height: 100%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 1px solid var(--color-border-card);
    box-shadow: var(--shadow-card-bottom);
}

.wcu-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.wcu-feature-card__icon-wrap {
    background-color: var(--bg-card);
    padding: 8px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wcu-feature-card__icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.wcu-feature-card__title {
    font-size: var(--font-size-16);
    font-family: var(--font-bold);
    color: var(--primary-dark);
    margin-bottom: 0;
    /* flex-basis: 0 (not auto) — with "auto" the title's hypothetical size
       for the wrap-fit check is its full single-line width, which is wider
       than the space left after the icon for most titles, so the whole
       item got pushed to a new line instead of wrapping its own text. */
    flex: 1 1 0%;
    min-width: 0;
}

.wcu-feature-card__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
    flex: 0 0 100%;
}

/* --- Divider --- */

.wcu-section__divider {
    border-top: 1px solid var(--color-divider);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* --- Counter Cards --- */

.wcu-counter-row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.wcu-counter-card {
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wcu-counter-row > div:nth-child(4n+1) .wcu-counter-card { background-color: var(--bg-overlay); }
.wcu-counter-row > div:nth-child(4n+2) .wcu-counter-card { background-color: var(--bg-overlay-red); }
.wcu-counter-row > div:nth-child(4n+3) .wcu-counter-card { background-color: var(--bg-overlay-green); }
.wcu-counter-row > div:nth-child(4n+4) .wcu-counter-card { background-color: var(--bg-overlay-yellow); }

.wcu-counter-card__icon-wrap {
    background-color: var(--color-white);
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.wcu-counter-card__icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.wcu-counter-card__number {
    font-size: var(--font-size-28);
    font-family: var(--font-extrabold);
    color: var(--primary-dark);
    line-height: 1;
}

.wcu-counter-card__suffix {
    font-size: var(--font-size-22);
    font-family: var(--font-extrabold);
    color: var(--primary-dark);
    margin-left: 2px;
    line-height: 1;
}

.wcu-counter-card__label {
    font-size: var(--font-size-13);
    font-family: var(--font-regular);
    color: var(--color-muted);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .wcu-section {
        padding-top: var(--spacing-40);
        padding-bottom: var(--spacing-40);
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .wcu-section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    .wcu-section__header {
        margin-bottom: var(--spacing-lg);
    }

    .wcu-section__main-row {
        margin-bottom: var(--spacing-lg);
    }

    .wcu-section__divider {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .wcu-section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .wcu-section__img {
        max-width: 360px;
        margin: 0 auto;
    }

    .wcu-section__header {
        margin-bottom: var(--spacing-md);
    }

    .wcu-section__main-row {
        margin-bottom: var(--spacing-md);
    }

    .wcu-section__divider {
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
}

/* ===== END WHY CHOOSE US SECTION ===== */

/* ============================================================
   ===== CASE STUDIES SECTION
============================================================ */

/* --- Compact Layout Override (reduced height, laptop-friendly) --- */

.cs-section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

/* --- Section Header --- */

.cs-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.cs-section .section-title {
    margin-bottom: 0;
}

/* --- Carousel Container --- */

.cs-carousel {
    position: relative;
    padding-bottom: 56px;
}

/* --- Show dots for this carousel (overrides global hide) --- */

.cs-carousel .owl-dots {
    display: flex;
    position: absolute;
    bottom: 16px;
    left: 0;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
}

/* --- Arrows: right bottom --- */

.cs-carousel .owl-nav {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* --- Card Wrapper --- */

.cs-card {
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* --- Left: Content --- */

.cs-card__content {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cs-card__content h2, .cs-card__content h3{
    font-size: var(--font-size-20);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-12);
}

.cs-card__content p {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

/* CTA button: compact within this card only (shared .cv-primary-button stays sitewide) */
.cs-card__content .cv-primary-button {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-16);
    gap: 5px;
}

/* --- Bullet List --- */

.cs-card__content ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.cs-card__content ul li {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    padding-left: 20px;
    position: relative;
    margin-bottom: var(--spacing-10);
}

.cs-card__content ul li:last-child {
    margin-bottom: 0;
}

.cs-card__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
}

/* --- Right: Image --- */
/* The <img> is a replaced element — inside a flex column its percentage
   height falls back to its own intrinsic aspect ratio during layout,
   so it never actually matched the stretched sibling column (left/right
   heights stayed mismatched). Absolutely positioning the <img> inside a
   relatively-positioned wrap removes it from that flow calculation, so
   the column height is driven purely by the left content column, and
   the image simply fills whatever that resolves to — always equal. */

.cs-card__img-wrap {
    position: relative;
    height: 100%;
    min-height: 240px;
    overflow: hidden;
}

.cs-card__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .cs-section {
        padding-top: var(--spacing-40);
        padding-bottom: var(--spacing-40);
    }

    .cs-card__content {
        padding: var(--spacing-lg);
    }
}

/* --- Responsive: ≤ 991px --- */
/* Columns stack from here down — the image becomes a normal block,
   sized by its own min-height floor instead of matching a sibling. */

@media (max-width: 991px) {

    .cs-section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    .cs-section__header {
        margin-bottom: var(--spacing-md);
    }

    .cs-card__img-wrap {
        height: auto;
        min-height: 260px;
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .cs-section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .cs-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    .cs-card__img-wrap {
        height: auto;
        min-height: 220px;
    }

    .cs-carousel {
        padding-bottom: 48px;
    }

    .cs-carousel .owl-nav {
        left: auto;
        right: 0;
        justify-content: flex-end;
    }

    .cs-carousel .owl-dots {
        left: 0;
        transform: none;
        justify-content: flex-start;
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .cs-card__content {
        padding: var(--spacing-md);
    }

    .cs-card__img-wrap {
        height: auto;
        min-height: 180px;
    }
}

/* ── Case Study KPI Stats Grid ── */
.cs-stats {
    border-left: 1px solid var(--primary-color);
    padding-left: var(--spacing-20);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.cs-stat-item {
    flex: 1 1 calc(50% - var(--spacing-sm));
    min-width: 140px;
}

/* Higher specificity (0-2-0) beats .cs-card__content p (0-2-0) via cascade order */
.cs-stats .cs-stat-number {
    font-size: var(--font-size-24);
    font-family: var(--font-extrabold);
    color: var(--primary-dark);
    line-height: 1.1;
    margin-bottom: var(--spacing-xs);
}

.cs-stats .cs-stat-label {
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--color-desc);
    max-width: 160px;
    line-height: 1.4;
    margin-bottom: var(--spacing-10);
}

@media (max-width: 767px) {
    .cs-stats .cs-stat-number { font-size: var(--font-size-22); }
}

/* ===== END CASE STUDIES SECTION ===== */

/* ============================================================
   ===== USE CASES SECTION
============================================================ */

/* ── Layout flex wrapper (title + nav + carousel) ── */
.uc-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--spacing-md);
}

/* ── Title: order 1, full-width row on its own line ── */
.uc-layout > .section-title {
    order: 1;
    flex: 1;
    margin-bottom: var(--spacing-xl);
}

/* ── Nav: order 2, sits right of title on desktop ── */
.uc-nav {
    order: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    margin-bottom: var(--spacing-xl);
}

/* ── Carousel: order 3, full width below title+nav ── */
.uc-layout > .uc-carousel {
    order: 3;
    width: 100%;
}

/* ── ≤991px: nav drops to below carousel ── */
@media (max-width: 991px) {
    .uc-layout > .section-title {
        flex: none;
        width: 100%;
        margin-bottom: var(--spacing-xl);
    }
    .uc-layout > .uc-carousel {
        order: 3;
        width: 100%;
        margin-bottom: 0;
    }
    .uc-nav {
        order: 4;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
        margin-top: var(--spacing-lg);
    }
}

/* ── Nav Buttons ── */
.uc-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: transparent;
    border: 2px solid var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    flex-shrink: 0;
}

.uc-nav-btn::before,
.uc-nav-btn::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px auto;
    transition: opacity var(--transition-base);
}

.uc-nav-btn::before { background-image: url('../cv-images/arrow-blue.png'); opacity: 1; }
.uc-nav-btn::after  { background-image: url('../cv-images/arrow-white.png'); opacity: 0; }

.uc-nav-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.uc-nav-btn:hover::before { opacity: 0; }
.uc-nav-btn:hover::after  { opacity: 1; }

.uc-nav-btn--prev::after  { transform: scaleX(-1); }
.uc-nav-btn--next::before { transform: scaleX(-1); }

/* ── Slide Card ── */
.uc-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-bottom);
    overflow: hidden;
    transform: translateZ(0);
    margin: 15px;
}

/* ── Left Column: Image + Benefits ── */
.uc-card__left {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-border-card) 50%, var(--bg-uc-col-top) 100%);
    padding: var(--spacing-20);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.uc-card__img {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-xl);
    object-fit: contain;
    display: block;
}

.uc-card__benefit-title {
    font-size: var(--font-size-20);
    font-family: var(--font-bold);
    color: var(--color-heading);
    text-align: center;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0 var(--spacing-md);
    width: 100%;
}

.uc-card__benefit-title::before,
.uc-card__benefit-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background-color: var(--primary-color);
    border-radius: var(--radius-full);
}

.uc-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.uc-card__list li {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    padding-left: 20px;
    position: relative;
    margin-bottom: var(--spacing-10);
}

.uc-card__list li:last-child { margin-bottom: 0; }

.uc-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
}

/* ── Right Column: Details ── */
.uc-card__right {
    padding: var(--spacing-20);
    display: flex;
    flex-direction: column;
}

.uc-card__heading {
    font-size: var(--font-size-24);
    font-family: var(--font-bold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-lg);
}

.uc-card__industry-label {
    font-size: var(--font-size-18);
    font-family: var(--font-bold);
    color: var(--color-muted);
    margin-bottom: var(--spacing-sm);
}

.uc-card__industry-value {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    
}

.uc-card__divider {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-md) 0;
    opacity: 1;
}

/* ── Info Block (Challenges / Solutions) ── */
.uc-card__block {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.uc-card__block-icon {
    flex-shrink: 0;
    background-color: var(--bg-card);
    padding: var(--spacing-sm);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.uc-card__icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.uc-card__block-title {
    font-size: var(--font-size-20);
    font-family: var(--font-bold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-sm);
}

.uc-card__block-desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ── Responsive — MD (≤991px) ── */
@media (max-width: 991px) {
    .uc-card__left  { height: auto; }
    .uc-card__right { height: auto; }
    .uc-card__heading { font-size: var(--font-size-20); }
}

/* ── Responsive — SM (≤767px) ── */
@media (max-width: 767px) {
    .uc-card__benefit-title { font-size: var(--font-size-16); }
    .uc-card__block-title   { font-size: var(--font-size-18); }
    .uc-card__heading       { font-size: var(--font-size-18); }
    .uc-nav                 { margin-top: var(--spacing-xs); }
}

/* ── Responsive — XS (≤575px) ── */
@media (max-width: 575px) {
    .uc-card__block { flex-direction: column; }
    .uc-card__industry-label { font-size: var(--font-size-16); }
}

/* ===== END USE CASES SECTION ===== */

/* ============================================================
   ===== INDUSTRIES SECTION
============================================================ */

.ind-section__header {
    margin-bottom: 30px;
}

.ind-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.ind-header-top .section-title {
    margin-bottom: 0;
}

.ind-nav {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.ind-nav-mobile {
    display: none;
}

/* ── Industry Card ── */
.ind-card {
    position: relative;
    display: block;
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 390px;
    text-decoration: none;
    cursor: pointer;
}

.ind-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.ind-card:hover .ind-card__img {
    transform: scale(1.06);
}

/* Default state — name visible at the bottom */
.ind-card__default {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 70px var(--spacing-card-p) var(--spacing-card-p);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
    z-index: 2;
    transition: opacity var(--transition-base);
}

.ind-card:hover .ind-card__default {
    opacity: 0;
}

.ind-card__default-name {
    font-size: var(--font-size-22);
    font-family: var(--font-bold);
    color: var(--color-white);
    margin-bottom: 0;
}

/* Hover state — content panel slides up from the bottom */
.ind-card__hover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 70px var(--spacing-card-p) var(--spacing-card-p);
    background: linear-gradient(to top, rgba(30, 20, 20, 0.95) 0%, rgba(30, 20, 20, 0.82) 60%, transparent 100%);
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}

.ind-card:hover .ind-card__hover {
    transform: translateY(0);
}

.ind-card__title {
    font-size: var(--font-size-24);
    font-family: var(--font-extrabold);
    color: var(--secondary-yellow);
    margin-bottom: var(--spacing-xs);
}

.ind-card__sub {
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.ind-card__link {
    font-size: var(--font-size-14);
    font-family: var(--font-semibold);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    transition: color var(--transition-base);
}

.ind-card__link:hover {
    color: var(--secondary-yellow);
}

.ind-card__arrow {
    transition: transform var(--transition-base);
}

.ind-card__link:hover .ind-card__arrow {
    transform: translateX(4px);
}

@media (max-width: 1199px) {
    .ind-card { height: 360px; }
}

@media (max-width: 767px) {
    .ind-card { height: 320px; }
    .ind-header-top .ind-nav { display: none; }
    .ind-nav-mobile { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
}

/* ===== END INDUSTRIES SECTION ===== */

/* ============================================================
   ===== HOW IT WORKS SECTION
   Card stack: cards 2/3/4 start tucked behind card 1 by default
   (peeking to the right). The first time the section scrolls into
   view, JS adds .is-revealed once and they slide out to a normal
   spread row, staggered via transition-delay — then it stays put.
============================================================ */

.hiw-section {
    position: relative;
    background-color: var(--bg-white);
    overflow: hidden;
}

.hiw-section__header {
    max-width: 640px;
    margin: 0 auto var(--spacing-2xl);
}

/* --- Card stack --- */

.hiw-cards {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0 var(--spacing-2xl);
}

.hiw-card {
    position: relative;
    flex: 1 1 0%;
    background-color: var(--color-white);
    border: 1.5px solid var(--hiw-accent-border, var(--color-border));
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 2.5s cubic-bezier(0.65, 0, 0.35, 1),
                box-shadow var(--transition-base);
    will-change: transform;
}

/* Each card's stack position (--hiw-n = steps to travel) and paint order.
   Card 1 is the anchor (stays put, on top, left side) — cards 2/3/4
   sit tucked behind it by default (peeking to the right, as in the
   reference screenshot). transition-delay is NOT set here — JS sets
   it as an inline style right before the reveal, so there is no
   ambiguity from CSS cascade/specificity about which value wins. */
.hiw-cards .hiw-card:nth-child(1) { --hiw-n: 0; z-index: 4; }
.hiw-cards .hiw-card:nth-child(2) { --hiw-n: 1; z-index: 3; }
.hiw-cards .hiw-card:nth-child(3) { --hiw-n: 2; z-index: 2; }
.hiw-cards .hiw-card:nth-child(4) { --hiw-n: 3; z-index: 1; }

/* Default state = stacked. Shift = own width + gap, minus a small
   "peek" so a sliver of each card stays visible behind the previous
   one. Negative because the stack sits toward the left (card 1). */
.hiw-cards .hiw-card {
    transform: translateX(calc(var(--hiw-n) * -1 * (100% + var(--spacing-lg) - 28px)));
}

/* Revealed state — added once, permanently, when the section first
   scrolls into view. Cards 2/3/4 slide out to their normal spread
   positions; card 1 never moves (--hiw-n: 0 either way). */
.hiw-cards.is-revealed .hiw-card {
    transform: translateX(0);
}

.hiw-card__accent-bar {
    height: 4px;
    background-color: var(--hiw-accent-border, var(--bg-overlay));
    flex-shrink: 0;
}

.hiw-card__content {
    position: relative;
    z-index: 1;
    padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
}

.hiw-card__num {
    display: block;
    font-family: var(--font-extrabold);
    font-size: 72px;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--hiw-accent, var(--primary-color));
    opacity: 0.16;
    margin-bottom: var(--spacing-md);
    transition: opacity var(--transition-base);
    user-select: none;
}

.hiw-card:hover .hiw-card__num { opacity: 0.28; }

.hiw-card__title {
    font-family: var(--font-bold);
    font-size: var(--font-size-19);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

.hiw-card__desc {
    font-family: var(--font-regular);
    font-size: var(--font-size-14);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* --- Color Variants ---
   --hiw-bar-color reuses the exact same flat tint tokens as the
   Why Choose Us counter cards (.wcu-counter-card), no gradient. */
.hiw-card--blue   { --hiw-accent: var(--primary-color);    --hiw-bar-color: var(--bg-overlay); }
.hiw-card--purple { --hiw-accent: var(--secondary-red);    --hiw-bar-color: var(--bg-overlay-red); }
.hiw-card--cyan   { --hiw-accent: var(--secondary-green);  --hiw-bar-color: var(--bg-overlay-green); }
.hiw-card--green  { --hiw-accent: var(--secondary-yellow); --hiw-bar-color: var(--bg-overlay-yellow); }

/* --- Responsive --- */

@media (max-width: 991px) {
    .hiw-card__content { padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md); }
    .hiw-card__num { font-size: 60px; }
}

/* Below 768px the stack becomes a plain vertical list — cards are
   never tucked behind one another here, and JS skips the reveal
   entirely at this width (see custom-global.js) */
@media (max-width: 767px) {
    .hiw-cards {
        flex-direction: column;
    }
    .hiw-cards .hiw-card {
        transform: none !important;
        transition: none;
    }
    .hiw-card { border-radius: 18px; }
    .hiw-card__num { font-size: 56px; letter-spacing: -2px; }
    .hiw-card__title { font-size: var(--font-size-18); }
}

@media (max-width: 575px) {
    .hiw-card__content { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); }
    .hiw-card__num { font-size: 48px; letter-spacing: -2px; }
    .hiw-card__title { font-size: var(--font-size-17); }
}

/* Reduced motion: skip the tucked-stack look entirely and show all
   four cards already spread out, since the reveal animation itself
   is skipped by JS for these users */
@media (prefers-reduced-motion: reduce) {
    .hiw-cards .hiw-card {
        transform: none;
    }
}

/* ===== END HOW IT WORKS SECTION ===== */

/* ============================================================
   ===== LOGO / TRUSTED BY SECTION
============================================================ */

/* --- Section Title Override (reduced bottom margin) --- */

.logo-section .section-title {
    margin-bottom: var(--spacing-2xl);
}

/* --- Logo Carousel --- */

.logo-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.logo-carousel .owl-item {
    display: flex;
}

/* --- Logo Card --- */

.logo-card {
    background-color: var(--color-white);
    border-radius: var(--radius-logo);
    border: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 88px;
    width: 100%;
}

.logo-card__img {
    width: auto !important;
    height: auto;
    max-height: 50px;
    max-width: 140px;
    object-fit: contain;
    display: block;
}

/* ===== END LOGO / TRUSTED BY SECTION ===== */

/* ============================================================
   ===== TESTIMONIAL SECTION
============================================================ */

/* --- Section Header --- */

.testimonial-section .section-title {
    margin-bottom: var(--spacing-sm);
}

.testimonial-section .section-desc {
    margin-bottom: 0;
}

.testimonial-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* --- Custom Nav Buttons --- */

.ts-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: transparent;
    border: 2px solid var(--primary-color);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.ts-nav-btn::before,
.ts-nav-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px auto;
    transition: opacity var(--transition-base);
}

.ts-nav-btn::before {
    background-image: url('../cv-images/arrow-blue.png');
    opacity: 1;
}

.ts-nav-btn::after {
    background-image: url('../cv-images/arrow-white.png');
    opacity: 0;
}

.ts-nav-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.ts-nav-btn:hover::before { opacity: 0; }
.ts-nav-btn:hover::after  { opacity: 1; }

/* Prev: blue(←) as-is; white(→) flip to point left */
.ts-nav-btn--prev::after  { transform: scaleX(-1); }
/* Next: blue(←) flip to point right; white(→) as-is */
.ts-nav-btn--next::before { transform: scaleX(-1); }

/* 2px left padding reveals the first card's clipped border without shifting layout */
.testimonial-carousel {
    padding-left: 2px;
}

/* --- Equal-height carousel items --- */

.testimonial-carousel .owl-stage {
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
}

.testimonial-carousel .owl-item {
    display: flex;
}

/* --- Testimonial Card --- */

.ts-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-logo);
    padding: var(--spacing-20);
    box-shadow: var(--shadow-card-bottom);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Quote Area --- */

.ts-card__quote-area {
    position: relative;
    display: inline-flex;
    margin-bottom: var(--spacing-md);
}

.ts-card__quote-area::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--bg-overlay-medium) 0%, transparent 65%);
    border-radius: var(--radius-full);
    pointer-events: none;
    z-index: 0;
}

.ts-card__quote-icon-wrap {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card-hover);
}

.ts-card__quote-icon {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
}

/* --- Description --- */

.ts-card__desc {
    font-size: var(--font-size-15);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-card-item-mb);
    flex: 1;
}

/* --- Divider --- */

.ts-card__divider {
    border: none;
    border-top: 1px solid var(--color-border-button);
    margin: 0;
}

/* --- Rating + Industry Tag --- */

.ts-card__meta {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.ts-card__stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--secondary-yellow);
    font-size: var(--font-size-14);
}

.ts-card__industry-tag {
    font-size: var(--font-size-14);
    font-family: var(--font-semibold);
    color: var(--secondary-green);
    background-color: var(--bg-overlay-green);
    padding: var(--spacing-xs) var(--spacing-10);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

/* --- Client Info --- */

.ts-card__client {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: auto;
}

.ts-card__client-name {
    font-size: var(--font-size-17);
    font-family: var(--font-bold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.ts-card__client-role {
    font-size: var(--font-size-15);
    font-family: var(--font-regular);
    color: var(--color-desc);
    margin-bottom: 0;
}

.ts-card__flag {
    width: 34px !important;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .testimonial-section__header {
        gap: var(--spacing-md);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .testimonial-section__header {
        align-items: center;
    }

    /* Give carousel horizontal breathing room so card borders aren't clipped */
    .testimonial-carousel {
        padding: 0 var(--spacing-xs);
    }

    .ts-card__client-name {
        font-size: var(--font-size-18);
    }

    .ts-card__client-role {
        font-size: var(--font-size-16);
    }
}

/* ===== END TESTIMONIAL SECTION ===== */

/* ============================================================
   ===== RESOURCES TEASER SECTION
============================================================ */

/* --- Section Header --- */

.resources-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* --- Resource Blog Card --- */

.rb-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: var(--spacing-20);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-card-bottom);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.rb-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* --- Feature Image --- */

.rb-card__image {
    width: 100%;
    height: 170px;
    border-radius: var(--radius-logo);
    margin-bottom: var(--spacing-md);
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .rb-card__image { height: 180px; }
}

/* --- Category Tag --- */

.rb-card__category-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.rb-card__read-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--color-muted);
    white-space: nowrap;
}

.rb-card__category {
    display: inline-block;
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--primary-color);
    background-color: var(--bg-tag-blog);
    border: 1px solid var(--color-border-tag);
    border-radius: var(--radius-full);
    padding: 3px 16px;
    margin-bottom: 0;
}

/* --- Card Title --- */

.rb-card__title-link {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-base);
}

.rb-card__title-link:hover {
    color: var(--primary-color);
}

.rb-card__title {
    font-size: var(--font-size-20);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Card Description --- */

.rb-card__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Author & CTA Footer --- */

.rb-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: auto;
}

.rb-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.rb-card__author-img {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.rb-card__author-name {
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--color-body-text);
    margin-bottom: 0;
    line-height: var(--line-height-tight);
}

.rb-card__author-date {
    font-size: var(--font-size-16);
    font-family: var(--font-light);
    color: var(--color-muted);
    margin-bottom: 0;
    line-height: var(--line-height-tight);
}

/* --- Responsive: ≤ 1199px (iPad Pro / LG) --- */

@media (max-width: 1199px) {

    .rb-card__footer {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .rb-card__title {
        font-size: var(--font-size-20);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .resources-section__header {
        align-items: center;
    }

    .rb-card__title {
        font-size: var(--font-size-18);
    }
}

/* ===== END RESOURCES TEASER SECTION ===== */

/* ============================================================
   ===== EMPTY POST MESSAGE (no related posts state)
============================================================ */

.empty-post-msg {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: 24px;
    box-shadow: 0 4px 48px rgba(0, 161, 241, 0.07), 0 1px 12px rgba(0, 0, 0, 0.05);
    padding: 68px 48px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
    overflow: hidden;
}

/* Radial glow blob */
.empty-post-msg::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 260px;
    background: radial-gradient(ellipse at 50% 20%, rgba(0, 161, 241, 0.09) 0%, transparent 68%);
    pointer-events: none;
}

/* Dot grid — bottom right */
.empty-post-msg::after {
    content: '';
    position: absolute;
    bottom: 28px;
    right: 32px;
    width: 88px;
    height: 88px;
    background-image: radial-gradient(circle, rgba(0, 161, 241, 0.22) 1.5px, transparent 1.5px);
    background-size: 13px 13px;
    pointer-events: none;
    opacity: 0.8;
}

/* ── Icon wrapper ── */
.empty-post-msg__icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 22px;
    background: linear-gradient(145deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    box-shadow: 0 14px 40px rgba(0, 161, 241, 0.42), 0 2px 10px rgba(0, 161, 241, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: epm-float 3.5s ease-in-out infinite;
    z-index: 1;
    flex-shrink: 0;
}

/* Shine overlay */
.empty-post-msg__icon-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, transparent 60%);
    pointer-events: none;
}

/* ── Ring pulses ── */
.empty-post-msg__ring {
    position: absolute;
    inset: -10px;
    border-radius: 30px;
    border: 1.5px solid rgba(0, 161, 241, 0.38);
    animation: epm-ring 2.8s ease-out infinite;
}

.empty-post-msg__ring::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 40px;
    border: 1px solid rgba(0, 161, 241, 0.18);
    animation: epm-ring 2.8s ease-out 0.55s infinite;
}

@keyframes epm-ring {
    0%   { transform: scale(1);    opacity: 0.8; }
    100% { transform: scale(1.65); opacity: 0; }
}

@keyframes epm-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35%       { transform: translateY(-11px) rotate(-1.5deg); }
    70%       { transform: translateY(-5px) rotate(1deg); }
}

/* ── Icon ── */
.empty-post-msg__icon {
    font-size: 36px;
    color: var(--color-white);
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* ── Body ── */
.empty-post-msg__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

/* ── Badge with blinking dot ── */
.empty-post-msg__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 100px;
    background: rgba(0, 161, 241, 0.08);
    border: 1px solid rgba(0, 161, 241, 0.22);
    color: var(--primary-color);
    font-size: 11px;
    font-family: var(--font-semibold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.empty-post-msg__badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    flex-shrink: 0;
    animation: epm-blink 1.6s ease-in-out infinite;
}

@keyframes epm-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.25; transform: scale(0.7); }
}

/* ── Heading ── */
.empty-post-msg__heading {
    font-size: var(--font-size-22);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    margin: 0;
    line-height: 1.3;
}

/* ── Sub text ── */
.empty-post-msg__text {
    font-size: var(--font-size-15);
    font-family: var(--font-regular);
    color: var(--color-muted);
    margin: 0;
    max-width: 380px;
    line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .empty-post-msg {
        padding: 52px 28px 44px;
    }
}

@media (max-width: 575px) {
    .empty-post-msg {
        padding: 44px 20px 36px;
        border-radius: 16px;
    }
    .empty-post-msg__icon-wrap {
        width: 76px;
        height: 76px;
        border-radius: 18px;
    }
    .empty-post-msg__icon-wrap::before { border-radius: 18px; }
    .empty-post-msg__ring { border-radius: 26px; }
    .empty-post-msg__icon { font-size: 30px; }
    .empty-post-msg__heading { font-size: var(--font-size-18); }
}

/* ===== END EMPTY POST MESSAGE ===== */

/* ============================================================
   ===== CV CONTENT EDITOR — Privacy / Legal / Static pages
   Class: .cv-content-editor
   Used on: privacy.php, terms pages, any WP editor content
============================================================ */

/* ── Section wrapper ── */
.privacy-content-section {
    background: var(--color-white);
}

/* ── Base wrapper ── */
.cv-content-editor {
    color: var(--color-body-text);
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    line-height: 1.8;
}

/* ──────────────────────────────────────────
   Headings h2 → h6
────────────────────────────────────────── */

/* Shared heading defaults */
.cv-content-editor h2,
.cv-content-editor h3,
.cv-content-editor h4,
.cv-content-editor h5,
.cv-content-editor h6 {
    color: var(--color-heading);
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* h2 — major section title with bottom divider */
.cv-content-editor h2 {
    font-size: var(--font-size-28);
    font-family: var(--font-semibold);
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--color-border-light);
}

/* h3 — sub-section title */
.cv-content-editor h3 {
    font-size: var(--font-size-22);
    font-family: var(--font-semibold);
}

/* h4 — minor heading */
.cv-content-editor h4 {
    font-size: var(--font-size-19);
    font-family: var(--font-medium);
}

/* h5 — small heading */
.cv-content-editor h5 {
    font-size: var(--font-size-17);
    font-family: var(--font-medium);
}

/* h6 — label-style heading in primary color */
.cv-content-editor h6 {
    font-size: var(--font-size-13);
    font-family: var(--font-semibold);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ──────────────────────────────────────────
   Paragraph
────────────────────────────────────────── */

.cv-content-editor p {
    margin-bottom: 1.2rem;
    color: var(--color-body-text);
    line-height: 1.8;
}

.cv-content-editor p:last-child {
    margin-bottom: 0;
}

/* ──────────────────────────────────────────
   Links
────────────────────────────────────────── */

.cv-content-editor a {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: rgba(0, 161, 241, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.cv-content-editor a:hover {
    color: var(--primary-color-dark);
    text-decoration-color: var(--primary-color-dark);
}

/* ──────────────────────────────────────────
   Bold / Italic
────────────────────────────────────────── */

.cv-content-editor strong,
.cv-content-editor b {
    font-family: var(--font-semibold);
    color: var(--color-heading);
}

.cv-content-editor em,
.cv-content-editor i {
    font-style: italic;
}

/* ──────────────────────────────────────────
   Unordered list — check icon style
────────────────────────────────────────── */

.cv-content-editor ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.25rem;
}

.cv-content-editor ul li {
    padding-left: 28px;
    margin-bottom: 0.55rem;
    background-image: url('../cv-images/png/check-icon.png');
    background-repeat: no-repeat;
    background-position: left 5px;
    background-size: 15px 15px;
    line-height: 1.75;
    color: var(--color-body-text);
}

/* ──────────────────────────────────────────
   Ordered list — numbered circle style
────────────────────────────────────────── */

.cv-content-editor ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.25rem;
    counter-reset: cv-ol-counter;
}

.cv-content-editor ol li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 0.55rem;
    counter-increment: cv-ol-counter;
    line-height: 1.75;
    color: var(--color-body-text);
}

/* Blue number bubble */
.cv-content-editor ol li::before {
    content: counter(cv-ol-counter);
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 161, 241, 0.10);
    color: var(--primary-color);
    font-size: var(--font-size-12);
    font-family: var(--font-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Nested lists (indent only) ── */
.cv-content-editor ul ul,
.cv-content-editor ol ol,
.cv-content-editor ul ol,
.cv-content-editor ol ul {
    margin-top: 0.4rem;
    margin-bottom: 0.2rem;
    padding-left: 1rem;
}

/* ──────────────────────────────────────────
   Blockquote
────────────────────────────────────────── */

.cv-content-editor blockquote {
    border-left: 3px solid var(--primary-color);
    background: var(--primary-color-bg);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 1.5rem 0;
    font-style: italic;
}

.cv-content-editor blockquote p {
    margin: 0;
    color: var(--color-body-text);
}

/* ──────────────────────────────────────────
   Horizontal rule
────────────────────────────────────────── */

.cv-content-editor hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}

/* ──────────────────────────────────────────
   Table (if editor adds any)
────────────────────────────────────────── */

.cv-content-editor table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-15);
    overflow-x: auto;
    display: block;
}

.cv-content-editor table th {
    background: var(--primary-color-bg);
    color: var(--color-heading);
    font-family: var(--font-semibold);
    font-size: var(--font-size-13);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(0, 161, 241, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cv-content-editor table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
    color: var(--color-body-text);
}

.cv-content-editor table tr:last-child td {
    border-bottom: none;
}

/* ===== END CV CONTENT EDITOR ===== */

/* ============================================================
   ===== SITEMAP SECTION
   File: sitemap.php
   Classes: .sitemap-section, .smp-head, .smp-grid
============================================================ */

/* ── Section ── */
.sitemap-section {
    background: var(--color-white);
}

/* ──────────────────────────────────────────
   Tree wrapper
────────────────────────────────────────── */

.smp-tree {
    max-width: 820px;
}

/* "Pages" heading */
.smp-tree__heading {
    font-size: var(--font-size-32);
    font-family: var(--font-bold);
    color: var(--color-heading);
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-border-light);
}

/* ──────────────────────────────────────────
   Each top-level section block
────────────────────────────────────────── */

.smp-tree__block {
    margin-bottom: 28px;
}

/* ── Leaf item (no children) wrapper ── */
.smp-tree__leaf {
    margin-bottom: 4px;
}

/* ── Level-1 parent heading (blue) ── */
.smp-tree__parent {
    display: inline-block;
    font-size: var(--font-size-18);
    font-family: var(--font-semibold);
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 14px;
    transition: color 0.2s ease;
}

.smp-tree__parent:hover {
    color: var(--primary-color-dark);
}

/* ── Children container with left tree-line ── */
.smp-tree__children {
    border-left: 2px solid var(--color-border-light-blue);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ──────────────────────────────────────────
   Sub-group block (e.g. Programming)
────────────────────────────────────────── */

.smp-tree__subblock {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Level-2 sub-parent heading (smaller blue) */
.smp-tree__subparent {
    display: inline-block;
    font-size: var(--font-size-15);
    font-family: var(--font-semibold);
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.smp-tree__subparent:hover {
    color: var(--primary-color-dark);
}

/* Sub-children with second-level tree-line */
.smp-tree__subchildren {
    border-left: 2px solid var(--color-border-light-blue);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ──────────────────────────────────────────
   Pill — leaf link item
────────────────────────────────────────── */

.smp-tree__pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--color-border-light-blue);
    border-radius: 6px;
    background: var(--color-white);
    font-size: var(--font-size-13);
    font-family: var(--font-regular);
    color: var(--primary-color);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    max-width: 100%;
}

.smp-tree__pill:hover {
    background: var(--primary-color);
    color: var(--color-white);
    border-color: var(--primary-color);
}

/* ──────────────────────────────────────────
   Responsive
────────────────────────────────────────── */

@media (max-width: 575px) {
    .smp-tree__heading {
        font-size: var(--font-size-24);
    }
    .smp-tree__parent {
        font-size: var(--font-size-16);
    }
    .smp-tree__pill {
        font-size: var(--font-size-12);
        padding: 5px 11px;
    }
}

/* ===== END SITEMAP SECTION ===== */

/* ============================================================
   ===== BLOG FILTER BAR
============================================================ */

.cv-filter-bar {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: 0;
    max-width: 60%;
}

.cv-filter-bar__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cv-filter-bar__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--primary-dark);
}

.cv-filter-bar__input::placeholder {
    color: var(--color-muted);
}

.cv-filter-bar__clear-icon {
    cursor: pointer;
    color: var(--color-muted);
    font-size: 18px;
    display: none;
    line-height: 1;
}

.cv-filter-bar__search-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-dark);
    cursor: pointer;
    font-size: var(--font-size-16);
    display: flex;
    align-items: center;
}

.cv-filter-bar__sep {
    width: 1px;
    height: 22px;
    background-color: var(--color-border);
    margin: 0 var(--spacing-lg);
    flex-shrink: 0;
}

.cv-filter-bar__filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.cv-filter-bar__filter-label {
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--primary-dark);
}

.cv-filter-bar__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cv-filter-bar__select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-muted);
    cursor: pointer;
    padding-right: 20px;
}

.cv-filter-bar__chevron {
    position: absolute;
    right: 0;
    font-size: var(--font-size-11);
    color: var(--color-muted);
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

/* Custom dropdown */
.cv-dropdown {
    position: relative;
}

.cv-dropdown__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-muted);
    line-height: 1;
}

.cv-dropdown__icon {
    font-size: var(--font-size-11);
    transition: transform var(--transition-base);
    pointer-events: none;
}

.cv-dropdown.is-open .cv-dropdown__icon {
    transform: rotate(180deg);
}

.cv-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: var(--shadow-md);
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 200;
    padding: var(--spacing-sm) 0;
}

.cv-dropdown.is-open .cv-dropdown__menu {
    display: block;
}

.cv-dropdown__item {
    padding: 10px var(--spacing-lg);
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--primary-dark);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}

.cv-dropdown__item:hover,
.cv-dropdown__item.is-active {
    background-color: var(--primary-color);
    color: var(--color-white);
}

.cv-filter-bar__clear-btn {
    margin-left: var(--spacing-md);
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-base);
    flex-shrink: 0;
}

.cv-filter-bar__clear-btn:hover {
    color: var(--primary-color);
}

@media (max-width: 767px) {
    .cv-filter-bar {
        max-width: 100%;
        border-radius: var(--radius-card);
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    .cv-filter-bar__search {
        width: 100%;
    }
    .cv-filter-bar__sep {
        display: none;
    }
    .cv-filter-bar__filter {
        flex: 1;
    }
}

/* ===== END BLOG FILTER BAR ===== */

/* ============================================================
   ===== BLOG PAGINATION
============================================================ */

.cv-pagination-wrap {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.cv-pagination-wrap .pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
}

.cv-pagination-wrap .pagination li {
    display: flex;
}

.cv-pagination-wrap .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--primary-dark);
    background-color: var(--bg-card);
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.cv-pagination-wrap .pagination .page-numbers:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
}

.cv-pagination-wrap .pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: var(--color-white);
    font-family: var(--font-bold);
}

.cv-pagination-wrap .pagination .page-numbers.dots {
    background-color: transparent;
    pointer-events: none;
}

@media (max-width: 991px) {
    .cv-pagination-wrap .pagination {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .cv-pagination-wrap {
        margin-bottom: var(--spacing-card-p);
    }
}

/* ===== END BLOG PAGINATION ===== */

/* ============================================================
   ===== CASE STUDIES FILTER BAR (modifier)
   Same .cv-filter-bar pattern as the Blog Listing Page, widened
   to fit an extra (Industry) filter group.
============================================================ */

.cv-filter-bar--case-study {
    max-width: 100%;
}

@media (max-width: 991px) {
    .cv-filter-bar--case-study {
        flex-wrap: wrap;
        border-radius: var(--radius-card);
        gap: var(--spacing-sm);
    }
    .cv-filter-bar--case-study .cv-filter-bar__search {
        width: 100%;
    }
    .cv-filter-bar--case-study .cv-filter-bar__sep {
        display: none;
    }
    .cv-filter-bar--case-study .cv-filter-bar__filter {
        flex: 1;
    }
}

/* ===== END CASE STUDIES FILTER BAR ===== */

/* ============================================================
   ===== CASE STUDIES ARCHIVE CARD
============================================================ */

.cv-case-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-p);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-card-bottom);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cv-case-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* --- Feature Image --- */

.cv-case-card__image {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-logo);
    margin-bottom: var(--spacing-card-item-mb);
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .cv-case-card__image { height: 180px; }
}

/* --- Category Pill + Country Flag --- */

.cv-case-card__meta-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-card-item-mb);
}

.cv-case-card__category {
    display: inline-block;
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--primary-color);
    background-color: var(--bg-tag-blog);
    border: 1px solid var(--color-border-tag);
    border-radius: var(--radius-full);
    padding: 4px 22px;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-case-card__flag {
    display: inline-flex;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--color-border-card);
}

.cv-case-card__flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Country flag source assets are low-resolution; force sharp upscaling instead of the browser's default blur */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* --- Card Title --- */

.cv-case-card__title-link {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-base);
}

.cv-case-card__title-link:hover {
    color: var(--primary-color);
}

.cv-case-card__title {
    font-size: var(--font-size-23);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-15);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Card Description --- */

.cv-case-card__desc {
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-lg);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Industry & CTA Footer --- */

.cv-case-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: auto;
}

.cv-case-card__industry {
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--primary-color);
    line-height: var(--line-height-tight);
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {
    .cv-case-card__title {
        font-size: var(--font-size-20);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {
    .cv-case-card__footer {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
}

/* ===== END CASE STUDIES ARCHIVE CARD ===== */

/* ============================================================
   ===== CTA SECTION
============================================================ */

.cta-bg-section {
    background-image:
        linear-gradient(var(--bg-overlay-cta), var(--bg-overlay-cta)),
        url('../cv-images/cta-backgound-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Title --- */

.cta-title {
    font-size: var(--font-size-38);
    font-family: var(--font-extrabold);
    color: var(--color-white);
    line-height: 1.42;
    margin-bottom: var(--spacing-card-item-mb);
}

/* --- Description --- */

.cta-description {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-white);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-card-item-mb);
}

/* --- Buttons Row --- */

.cta-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

/* --- Explore Link --- */

.cta-explore-link {
    font-size: var(--font-size-18);
    font-family: var(--font-bold);
    color: var(--color-white);
    text-decoration: none;
    line-height: var(--line-height-normal);
    transition: color var(--transition-base);
}

.cta-explore-link:hover {
    color: var(--color-black);
}

/* --- Responsive: ≤ 1199px --- */
@media (max-width: 1440px) {
    .cta-description {
        max-width: 600px;
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .cta-title {
        font-size: var(--font-size-32);
        line-height: 1.35;
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .cta-title {
        font-size: var(--font-size-26);
        line-height: 1.35;
    }

    .cta-description {
        font-size: var(--font-size-15);
    }

    .cta-explore-link {
        font-size: var(--font-size-16);
    }

    .cta-buttons {
        gap: var(--spacing-md);
    }
}

/* ===== END CTA SECTION ===== */

/* ============================================================
   ===== SOLUTIONS SECTION
============================================================ */

/* --- Section Background --- */

.solutions-bg-section {
    background-color: var(--bg-solutions);
}

/* --- Compact Layout Override (laptop-friendly, reduced whitespace) --- */

#solutions-section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

/* --- Section Header --- */

.sol-section__header {
    max-width: 840px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
}

.sol-section__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-white-alpha-75);
    line-height: var(--line-height-normal);
    max-width: 840px;
    margin: 0 auto;
}

/* --- Accordion --- */

.sol-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sol-accordion__item {
    border: 1px solid var(--color-white-alpha-05);
    border-radius: var(--radius-xl);
}

.sol-accordion__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    background: none;
    border: none;
    padding: var(--spacing-12) var(--spacing-lg);
    cursor: pointer;
    text-align: left;
    border-radius: var(--radius-xl);
}

/* Number Badge */

.sol-accordion__badge {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-white-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-14);
    font-family: var(--font-semibold);
    color: var(--color-white);
    flex-shrink: 0;
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}

/* Accordion Title */

.sol-accordion__title {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-white);
    flex: 1;
    transition: font-family var(--transition-base);
}

/* Chevron Arrow */

.sol-accordion__arrow {
    font-size: var(--font-size-14);
    color: var(--color-white);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

/* Active State */

.sol-accordion__item--active .sol-accordion__badge {
    background-color: var(--color-white);
    color: var(--primary-color);
    border-color: var(--color-white);
}

.sol-accordion__item--active .sol-accordion__title {
    font-family: var(--font-semibold);
}

.sol-accordion__item--active .sol-accordion__arrow {
    transform: rotate(180deg);
}

/* Body (slide animation via max-height) */

.sol-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.sol-accordion__item--active .sol-accordion__body {
    max-height: 160px;
}

.sol-accordion__body-inner {
    padding: 0 var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) + 40px + var(--spacing-md));
}

.sol-accordion__body-inner p {
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-white-alpha-75);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* --- Right Image Card --- */

.sol-image-card {
    border: 1px solid var(--color-white-alpha-05);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.sol-image-card__img {
    width: auto;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    transition: opacity var(--transition-base);
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    #solutions-section {
        padding-top: var(--spacing-40);
        padding-bottom: var(--spacing-40);
    }
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    #solutions-section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    .sol-section__header {
        margin-bottom: var(--spacing-md);
    }

    .sol-image-card {
        padding: var(--spacing-md);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    #solutions-section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .sol-accordion__header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .sol-accordion__title {
        font-size: var(--font-size-15);
    }

    .sol-image-card {
        margin-top: var(--spacing-lg);
        padding: var(--spacing-sm);
    }
}

/* ===== END SOLUTIONS SECTION ===== */


/* ============================================================
   ===== FOOTER SECTION
============================================================ */

/* --- Wrapper --- */

.cv-footer-section {
    background-color: var(--color-white);
    padding-top: 50px;
    padding-bottom: 32px;
    position: relative;
    overflow: hidden;
}

/* Soft radial glow on left and right */

.cv-footer__glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: var(--radius-full);
    pointer-events: none;
    z-index: 0;
}

.cv-footer__glow--left {
    top: -100px;
    left: -200px;
    background: radial-gradient(circle, var(--bg-overlay) 0%, transparent 65%);
}

.cv-footer__glow--right {
    bottom: -100px;
    right: -200px;
    background: radial-gradient(circle, var(--bg-overlay) 0%, transparent 65%);
}

.cv-footer-section > .container {
    position: relative;
    z-index: 1;
}

/* --- Main row spacing --- */

.cv-footer__main-row {
    margin-bottom: var(--spacing-xl);
}

/* --- Logo --- */

.cv-footer__logo-wrap {
    margin-bottom: var(--spacing-card-item-mb);
}

.cv-footer__logo {
    height: 52px;
    width: auto;
    display: block;
}

/* --- Description --- */

.cv-footer__desc {
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-card-item-mb);
}

/* --- Microsoft Partner Badge --- */

.cv-footer__ms-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background-color: var(--bg-footer-badge);
    border-radius: var(--radius-full);
    margin-bottom: 30px;
}

.cv-footer__ms-badge-img {
    height: 28px;
    width: auto;
    display: block;
}

/* --- Presence --- */

.cv-footer__presence-title {
    font-size: var(--font-size-14);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-card-item-mb);
}

.cv-footer__flags {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cv-footer__flag {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* --- Menu Column --- */

.cv-footer__menu-title {
    font-size: var(--font-size-14) !important;
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1.4;
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.cv-footer__menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cv-footer__menu--2col .cv-footer__menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: var(--spacing-sm);
}

.cv-footer__menu--2col .cv-footer__menu-list > li {
    flex: 0 0 calc(50% - 8px);
}

@media (max-width: 767px) {
    .cv-footer__menu {
        border-bottom: 1px solid var(--color-border-card);
        padding: 14px 0;
    }
    .cv-footer__menu-title {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
        user-select: none;
    }
    .cv-footer__menu-title::after {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3v14M3 10h14' stroke='%23312B2B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform var(--transition-slow);
        transform: rotate(0deg);
    }
    .cv-footer__menu.is-open .cv-footer__menu-title::after {
        transform: rotate(45deg);
    }
    .cv-footer__menu .cv-footer__menu-list {
        display: none;
        margin-top: var(--spacing-lg);
    }
    .cv-footer__menu.is-open .cv-footer__menu-list {
        display: flex;
    }
    .cv-footer__menu--2col.is-open .cv-footer__menu-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {
    .cv-footer__menu--2col.is-open .cv-footer__menu-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .cv-footer__menu--2col .cv-footer__menu-list > li {
        flex: none;
    }
}

/* --- Menu Links (styled via list class, CSS chevron via ::before) --- */

.cv-footer__menu-list li a {
    position: relative;
    display: block;
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-desc);
    text-decoration: none;
    padding-left: 0;
    transition: color var(--transition-base),
                padding-left var(--transition-base);
}

/* CSS-only chevron — built from two borders, slides in from left */
.cv-footer__menu-list li a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--primary-color);
    border-right: 1.5px solid var(--primary-color);
    transform: translateY(-55%) rotate(45deg);
    opacity: 0;
    transition: opacity var(--transition-base),
                left var(--transition-base);
}

.cv-footer__menu-list li a:hover {
    color: var(--primary-color);
    padding-left: 18px;
}

.cv-footer__menu-list li a:hover::before {
    left: 3px;
    opacity: 1;
}

/* --- Divider --- */

.cv-footer__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0 0 var(--spacing-lg) 0;
}

/* --- Bottom Bar --- */

.cv-footer__bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.cv-footer__copyright {
    font-size: var(--font-size-12);
    font-family: var(--font-medium);
    color: var(--color-footer-copyright);
    margin-bottom: 0;
}

/* --- Social Icons --- */

.cv-footer__social {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.cv-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--bg-footer-social);
    color: var(--color-footer-social);
    font-size: var(--font-size-16);
    text-decoration: none;
    flex-shrink: 0;
    transition: color var(--transition-base),
                background-color var(--transition-base),
                transform var(--transition-base);
}

.cv-footer__social-link:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* --- Responsive: ≤ 1199px --- */

@media (max-width: 1199px) {

    .cv-footer__glow {
        width: 380px;
        height: 380px;
    }
}

/* --- Responsive: ≤ 991px — 2 columns --- */

@media (max-width: 991px) {

    .cv-footer__main-row {
        margin-bottom: var(--spacing-lg);
    }
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .cv-footer-section {
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .cv-footer__bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .cv-footer__glow {
        width: 260px;
        height: 260px;
    }
}

/* ===== END FOOTER SECTION =====  */


/* ============================================================
   ===== SITE HEADER / NAVIGATION 
============================================================ */

/* --- Outer header wrapper --- */

/* Issues 1 + 2 + 3:
   position:absolute floats over hero on load (no layout push).
   position:fixed is added via .is-sticky so the pill stays
   visible on scroll. Padding never changes — pill shape is
   identical in both states. */

.cv-site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-fixed);
    padding: 15px 0 8px;
}

.cv-site-header.is-sticky {
    position: fixed;
    animation: cv-sticky-slidein 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes cv-sticky-slidein {
    from {
        transform: translateY(-100%);
        opacity: 0.6;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Navigation pill (shape never changes between states) --- */

.cv-nav-pill {
    display: flex;
    align-items: center;
    position: relative;
    background-color: transparent;
    border: 1px solid #e5e7eb85;
    border-radius: 20px;
    box-shadow: none;
    padding: 15px 20px;
    gap: var(--spacing-md);
}
.single-industries .cv-nav-pill {
    background-color: #ffffff63;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    box-shadow: none;
    border: none;
}
#cv-site-header.is-sticky .cv-nav-pill {
    box-shadow: var(--shadow-nav-pill);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
}

/* --- Logo --- */

.cv-nav-pill__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.cv-nav-pill__logo-img {
    height: 40px;
    width: auto;
    display: block;
}

/* --- Nav wrapper (parent of Max Mega Menu output) --- */

.cv-nav-pill__nav {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Menu font --- */

#mega-menu-primary .mega-menu-link {
    font-family: var(--font-medium) !important;
}
@media (max-width: 1440px) {
    .cv-nav-pill__logo-img {
        height: 34px;
    }
}
@media (min-width: 991px) {
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu {
        margin-top: 15px;
        border: 1px solid #E5E5E5 !important;
        box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.14) !important;
    }
    /* Flyout submenu — same border + shadow as mega menu */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu {
        border: 1px solid #E5E5E5 !important;
        box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.14) !important;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
        margin-top: 15px;
    }

    /* Flyout items — hover: arrow slides in + text shifts right (same as footer links) */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu li a.mega-menu-link {
        position: relative !important;
        padding-left: 0 !important;
        font-family: var(--font-semibold) !important;
        transition: color var(--transition-base),
                    padding-left var(--transition-base) !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu li a.mega-menu-link::before {
        content: '' !important;
        position: absolute !important;
        left: -10px !important;
        top: 50% !important;
        width: 6px !important;
        height: 6px !important;
        border-top: 1.5px solid var(--primary-color) !important;
        border-right: 1.5px solid var(--primary-color) !important;
        transform: translateY(-55%) rotate(45deg) !important;
        opacity: 0 !important;
        transition: opacity var(--transition-base),
                    left var(--transition-base) !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu li a.mega-menu-link:hover,
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link {
        color: var(--primary-color) !important;
        padding-left: 18px !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu li a.mega-menu-link:hover::before,
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link::before {
        left: 3px !important;
        opacity: 1 !important;
    }

    /* #mega-menu-primary .menu-btn-cv {
        margin-left: 20px !important;
    } */
}
@media (min-width: 1440px) {
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu {
        margin-top: 19px !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu {
        margin-top: 19px;
    }
}
@media (min-width: 1600px) {
    .max-mega-menu {
        column-gap: 10px !important;
    }
}


/* ≤ 1440px — reduce pill padding, logo, button margin */
@media (max-width: 1440px) {
    .cv-nav-pill {
        padding: 12px 20px;
        gap: 10px
    }
    #mega-menu-primary .menu-btn-cv {
        margin-left: 10px !important;
    }
}

/* ≤ 1280px — further reduce to prevent wrapping */
@media (max-width: 1366px) {
    .cv-nav-pill__logo-img {
        height: 30px;
    }
}
@media (max-width: 1280px) {
    .cv-nav-pill {
        padding: 10px 20px;
        gap: var(--spacing-sm);
    }
    /* #mega-menu-primary .menu-btn-cv {
        margin-left: 20px !important;
    } */
    #mega-menu-primary .mega-menu-link {
        font-size: var(--font-size-14) !important;
    }
}

/* ============================================================
   Responsive — ≤ 991px: slide-from-left mobile menu
============================================================ */

@media (max-width: 991px) {

    /* Pill becomes logo + hamburger row */
    .cv-nav-pill {
        padding: 10px 20px;
        justify-content: space-between;
        background-color: var(--color-white) !important;
        border: 1px solid var(--color-border) !important;
    }
    .cv-nav-pill__nav {
        flex: 0 0 auto;
    }

    .cv-nav-pill__logo-img {
        height: 36px;
    }

    /* Show Max Mega Menu's hamburger */
    #mega-menu-wrap-primary .mega-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    /* ── Slide-from-left panel ──
       The panel is always in the DOM (display:flex) so the CSS
       transition can animate. It is hidden off-screen via
       translateX(-100%) and visibility:hidden.
       When the menu opens, Max Mega Menu adds
       "mega-menu-primary-mobile-open" to <body>. */

    #mega-menu-primary.mega-menu {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 400px !important;
        height: 100dvh !important;
        background-color: var(--color-white) !important;
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.14) !important;
        padding: 24px 16px 32px !important;
        overflow-y: auto !important;
        z-index: var(--z-modal) !important;
        /* override plugin inline width / left */
        margin: 0 !important;
        /* hidden state */
        transform: translateX(-100%) !important;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.35s !important;
    }
    
    .mega-menu-flyout ul li {
        margin-left: 10px !important;
    }
    /* Open state — body class added by Max Mega Menu */
    body.mega-menu-primary-mobile-open #mega-menu-primary.mega-menu {
        transform: translateX(0) !important;
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s !important;
    }

    /* Dark overlay — only covers area to the right of the slide panel */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 400px;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.50);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.35s;
        pointer-events: none;
    }
    body.mega-menu-primary-mobile-open::after {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
    }

    /* Top-level links inside the slide panel */
    #mega-menu-primary > .mega-menu-item > .mega-menu-link {
        padding: 12px 8px !important;
        font-size: var(--font-size-16) !important;
        border-radius: var(--radius-md) !important;
        width: 100%;
    }

    /* Sub-menus stack vertically */
    #mega-menu-primary .mega-sub-menu {
        min-width: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border-radius: var(--radius-md) !important;
        padding: 0 !important;
        position: static !important;
    }

    #mega-menu-primary .mega-sub-menu .mega-menu-row > .mega-sub-menu {
        flex-direction: column !important;
    }

    #mega-menu-primary .mega-sub-menu .mega-menu-column {
        padding: 0 !important;
        border-left: none !important;
        margin-left: 0 !important;
    }

    #mega-menu-primary .mega-sub-menu .mega-menu-column + .mega-menu-column {
        border-left: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    #mega-menu-primary .menu-btn-cv {
        margin-left: 0px !important;
    }
}

/* ============================================================
   Responsive — ≤ 767px (SM)
============================================================ */

@media (max-width: 767px) {

    .cv-site-header {
        padding: 10px 0;
    }

    .cv-nav-pill {
        padding: 8px 20px;
    }

    .cv-nav-pill__logo-img {
        height: 32px;
    }

    #mega-menu-primary.mega-menu {
        width: 300px !important;
    }

    /* Overlay left edge matches 300px menu width at ≤767px */
    body::after {
        left: 300px;
    }
}

/* ===== END SITE HEADER / NAVIGATION ===== */


/* ============================================================
   NAV CTA BUTTON — .menu-btn-cv
   Matches the primary button style (hero-banner-primary)
============================================================ */
#mega-menu-primary .menu-btn-cv > a.mega-menu-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--font-size-15) !important;
    font-family: var(--font-semibold) !important;
    color: var(--color-white) !important;
    background-color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base) !important;
}

#mega-menu-primary .menu-btn-cv > a.mega-menu-link:hover {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
    color: var(--color-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(0, 161, 241, 0.40) !important;
}

#mega-menu-primary .menu-btn-cv > a.mega-menu-link:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0, 161, 241, 0.30) !important;
}

@media (max-width: 991px) {
    #mega-menu-primary .menu-btn-cv > a.mega-menu-link {
        width: fit-content !important;
        align-self: flex-start !important;

    }
}

/* Button padding overrides — must come AFTER base rule to win */
@media (max-width: 1440px) {
    #mega-menu-wrap-primary #mega-menu-primary .menu-btn-cv > a.mega-menu-link {
        padding: 9px 20px !important;
    }
}

@media (max-width: 1280px) {
    #mega-menu-wrap-primary #mega-menu-primary .menu-btn-cv > a.mega-menu-link {
        padding: 5px 14px !important;
        font-size: var(--font-size-12) !important;
        min-height: auto !important;
    }
}

/* ===== END NAV CTA BUTTON ===== */


/* ============================================================
   MEGA MENU CONTENT BOX — .mega-menu-content-box
   Styles for widget text area inside mega dropdown panel
============================================================ */

/* Section label (h4.mega-block-title) */
.mega-menu-content-box .mega-block-title {
    font-size: var(--font-size-12) !important;
    font-family: var(--font-bold) !important;
    color: var(--primary-color) !important;
    padding-bottom: var(--spacing-card-item-mb) !important;
}

/* Heading (h3) */
.mega-menu-content-box .textwidget h3 {
    font-size: var(--font-size-16) !important;
    font-family: var(--font-semibold) !important;
    color: var(--primary-dark) !important;
    padding-bottom: var(--spacing-menu-bottom) !important;
}

/* Description (p) */
.mega-menu-content-box .textwidget p {
    font-size: var(--font-size-14) !important;
    font-family: var(--font-regular) !important;
    color: var(--color-desc) !important;
    padding-bottom: var(--spacing-menu-bottom) !important;
}
/* Button (a) */
.mega-menu-content-box .textwidget a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: var(--spacing-10) var(--spacing-card-item-mb);
    background-color: var(--primary-color);
    color: var(--color-white);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-14);
    font-family: var(--font-bold);
    line-height: var(--line-height-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base);
}

.mega-menu-content-box .textwidget a:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 161, 241, 0.40);
}

.mega-menu-content-box .textwidget a:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 161, 241, 0.30);
}
/* ===== END MEGA MENU CONTENT BOX ===== */

/* ============================================================
   MEGA MENU DROPDOWN ITEM BOX — .cv-dropdown-item-box
   Icon + title + subtitle row used inside mega dropdown panels
============================================================ */
.cv-dropdown-item-box h4 { 
    font-size: var(--font-size-12) !important;
    font-family: var(--font-bold) !important;
    color: var(--primary-color) !important;
}
.cv-dropdown-item-box {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}

/* Icon with rounded light-blue background */
.cv-dropdown-item-box img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 8px;
    background-color: var(--primary-color-xlight);
    border-radius: var(--radius-lg);
    box-sizing: content-box;
}

/* Text wrapper */
.cv-dropdown-item-box span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title */
.cv-dropdown-item-box strong {
    font-size: var(--font-size-14) !important;
    font-family: var(--font-semibold) !important;
    color: var(--primary-dark) !important;
    line-height: var(--line-height-snug);
}

/* Subtitle */
.cv-dropdown-item-box small {
    font-size: var(--font-size-12) !important;
    font-family: var(--font-regular) !important;
    color: var(--color-nav-dis) !important;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

/* ============================================================
   MEGA CV DROPDOWN ITEM BOX — .mega-cv-dropdown-item-box
   Hover effect for li items inside the mega dropdown
============================================================ */

/* Base state — link layout + transition setup */
.mega-cv-dropdown-item-box li a.mega-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: var(--radius-lg) !important;
    text-decoration: none !important;
    transition: background-color var(--transition-base) !important;
}

/* Icon base transition */
.mega-cv-dropdown-item-box li a.mega-menu-link img {
    transition: background-color var(--transition-base),
                transform var(--transition-base) !important;
}

/* Strong base transition */
.mega-cv-dropdown-item-box li a.mega-menu-link strong {
    transition: color var(--transition-base) !important;
}

/* Hover + Active — highlight row background */
.mega-cv-dropdown-item-box li:hover a.mega-menu-link,
.mega-cv-dropdown-item-box li.mega-current-menu-item a.mega-menu-link {
    background-color: var(--primary-color-xlight) !important;
}

/* Hover + Active — icon box gets deeper blue bg */
.mega-cv-dropdown-item-box li:hover a.mega-menu-link img,
.mega-cv-dropdown-item-box li.mega-current-menu-item a.mega-menu-link img {
    background-color: rgba(0, 161, 241, 0.20) !important;
}

/* Hover + Active — title turns primary blue */
.mega-cv-dropdown-item-box li:hover a.mega-menu-link strong,
.mega-cv-dropdown-item-box li.mega-current-menu-item a.mega-menu-link strong {
    color: var(--primary-color) !important;
}

/* ===== END MEGA MENU DROPDOWN ITEM BOX ===== */


/* ============================================================
   MEGA MENU SECTION — .cv-mega-menu-section
============================================================ */

/* li padding inside sub-menu — overrides plugin's 15px rule */
#mega-menu-wrap-primary #mega-menu-primary .mega-cv-dropdown-item-box ul li {
    padding: 10px !important;
}

/* ===== END MEGA MENU SECTION ===== */


/* Hide first li inside .cv-dropdown-right-item on mobile */
@media (max-width: 991px) {
    .cv-dropdown-right-item .mega-sub-menu li:first-child {
        display: none !important;
    }
}


/* ============================================================
   MEGA MENU ARROW INDICATOR — span.mega-indicator::after
   Replaces dashicons with a clean SVG chevron
============================================================ */

/* Override dashicons — use SVG chevron instead */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312B2B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
    vertical-align: middle !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

/* Hover — rotate + turn blue */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children:hover > a.mega-menu-link > span.mega-indicator::after {
    transform: rotate(180deg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A1F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Open state (mega-toggle-on) */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
    transform: rotate(180deg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A1F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Active state — arrow turns primary blue (no rotation) */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-current-menu-item > a.mega-menu-link > span.mega-indicator::after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-current-menu-ancestor > a.mega-menu-link > span.mega-indicator::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A1F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ===== END MEGA MENU ARROW INDICATOR ===== */
@media only screen and (min-width: 992px) and (max-width: 1199px)  {
    #mega-menu-primary .menu-btn-cv {
        margin-left: 0px !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary .menu-btn-cv > a.mega-menu-link {
        padding: 7px 12px !important;
        font-size: var(--font-size-12) !important;
        line-height: normal !important;
    }
    .cv-nav-pill__logo-img {
        height: 20px;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        padding: 0px 5px;

    }
    .cv-nav-pill {
        padding: 8px 12px;
        gap: var(--spacing-sm);
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-size: var(--font-size-12) !important;
    }
}

/* ============================================================
   ===== SOLUTIONS BANNER SECTION
============================================================ */

.bg-radial-primary {
    background-image: var(--bg-radial-primary);
}

/* .sol-banner-section {
    padding-top: 188px;
    padding-bottom: 98px;
    background-color: var(--bg-section);
} */

.sol-banner-section {
    padding-top: 120px;
    padding-bottom: 50px;
    background-color: var(--bg-section);
}


.main-banner-heading {
    font-size: var(--font-size-62);
    line-height: 80px;
    font-family: var(--font-extrabold);
    text-align: center;
    color: var(--color-heading);
    margin-bottom: 20px;
}

.main-banner-heading__highlight {
    color: var(--primary-color);
    display: block;
}
.main-banner-heading__highlight_v2 {
    color: var(--primary-color);
}

.common-description, .common-description p {
    font-size: var(--font-size-20);
    line-height: 32px;
    font-family: var(--font-regular);
    color: var(--color-desc);
    max-width: 800px;
    margin: 0 auto 30px;
}

.ms-partner-card {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 15px 20px;
    border: 1px solid var(--color-border-partner);
    background: var(--color-white);
}

.ms-partner-card__img {
    height: 36px;
    width: auto;
    display: block;
}

.ms-partner-card__separator {
    width: 1px;
    height: 40px;
    background-color: var(--color-separator-line);
    margin: 0 var(--spacing-md);
    flex-shrink: 0;
}

.ms-partner-card__label {
    display: block;
    color: var(--color-partner-label);
    font-size: var(--font-size-10);
    font-family: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: 3px;
    line-height: normal;
}

.ms-partner-card__value {
    display: block;
    color: var(--color-partner-text);
    font-size: var(--font-size-13);
    font-family: var(--font-medium);
    line-height: normal;
}

@media (max-width: 1440px) {
    .sol-banner-section {
        padding-top: 110px;
        padding-bottom: 50px;
    }
}

@media (max-width: 1366px) {
    .main-banner-heading {
       font-size: var(--font-size-54);
        line-height: 72px;
    }
}

@media (max-width: 1199px) {
    .main-banner-heading {
        font-size: var(--font-size-50);
        line-height: 66px;
    }
    .main-banner-heading__highlight {
        display: unset;
    }
    .main-banner-heading__highlight_v2 {
        display: unset;
    }
}

@media (max-width: 991px) {
    .sol-banner-section {
        padding-top: 130px;
        padding-bottom: 50px;
    }
    .main-banner-heading {
        font-size: var(--font-size-42);
        line-height: 56px;
    }
    .common-description, .common-description p {
        font-size: var(--font-size-18);
        line-height: 28px;
    }
}

@media (max-width: 767px) {
    .sol-banner-section {
        padding-top: 110px;
    }
    .main-banner-heading {
        font-size: var(--font-size-32);
        line-height: 46px;
    }
    .common-description, .common-description p {
        font-size: var(--font-size-16);
        line-height: 26px;
        margin-bottom: 15px;
    }
}

@media (max-width: 575px) {
    .sol-banner-section {
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .main-banner-heading {
        font-size: var(--font-size-26);
        line-height: 38px;
        margin-bottom: 10px;
    }
    .ms-partner-card {
        padding: 12px 18px;
    }
}

/* ===== END SOLUTIONS BANNER SECTION ===== */

/* ============================================================
   ===== CONTACT INFORMATION SECTION
============================================================ */

/* --- Section wrapper + subtle dot-grid backdrop --- */

.contact-info-section {
    position: relative;
    overflow: hidden;
}

.contact-info-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.contact-info-section .container {
    position: relative;
    z-index: 1;
}

/* --- Section Header --- */

.contact-info-section__header {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
}

.contact-info-section__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--primary-color-xlight);
    color: var(--primary-color-dark);
    border-radius: var(--radius-full);
    font-size: var(--font-size-13);
    font-family: var(--font-semibold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.contact-info-section .section-title {
    margin-bottom: 0;
}

/* --- Card (shared base) --- */

.contact-info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-card);
    padding: 56px var(--spacing-xl) var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.contact-info-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Floating icon / flag badge, poking above the card edge */

.contact-info-card__icon-wrap,
.contact-info-card__flag-wrap {
    position: absolute;
    z-index: 2;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--bg-card);
    border: 3px solid var(--color-white);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-24);
    color: var(--primary-color);
}

/* Hover: badge lifts slightly and gets a soft colored glow ring
   instead of a top accent bar (which used to cut across the badge) */

.contact-info-card:hover .contact-info-card__icon-wrap,
.contact-info-card:hover .contact-info-card__flag-wrap {
    transform: translateX(-50%) translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 5px var(--primary-color-xlight), var(--shadow-md);
}

.contact-info-card__icon-img,
.contact-info-card__flag {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-full);
}

.contact-info-card__title {
    font-size: var(--font-size-20);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-lg);
}

/* --- Rows (icon + label/value) --- */

.contact-info-card__rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    margin-top: auto;
}

.contact-info-card__row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.contact-info-card__row--link:hover {
    background-color: var(--bg-card);
    transform: translateX(4px);
}

.contact-info-card__row-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    color: var(--primary-color);
    font-size: var(--font-size-14);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.contact-info-card__row--link:hover .contact-info-card__row-icon {
    background-color: var(--primary-color);
    color: var(--color-white);
}

.contact-info-card__row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-info-card__row-label {
    font-size: var(--font-size-11);
    font-family: var(--font-semibold);
    color: var(--color-muted);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
}

.contact-info-card__row-value {
    font-size: var(--font-size-15);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    line-height: var(--line-height-normal);
    word-break: break-word;
}

.contact-info-card__row-value p {
    margin-bottom: 0;
}

/* WYSIWYG address/phone fields may contain their own <a> (e.g. tel: links) —
   match the theme's primary blue instead of the browser/Bootstrap default */
.contact-info-card__row-value a {
    color: var(--primary-color);
    text-decoration: none;
}

.contact-info-card__row-value a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

/* --- Reach Us card: highlighted with the primary gradient --- */

.contact-info-card--highlight {
    background: var(--bg-cta);
    border-color: transparent;
    box-shadow: var(--shadow-primary);
}

.contact-info-card--highlight .contact-info-card__icon-wrap {
    background-color: var(--color-white-alpha-20);
    border-color: var(--color-white-alpha-20);
    color: var(--color-white);
}

.contact-info-card--highlight:hover .contact-info-card__icon-wrap {
    border-color: var(--color-white);
    box-shadow: 0 0 0 5px var(--color-white-alpha-20), var(--shadow-md);
}

.contact-info-card--highlight .contact-info-card__title {
    color: var(--color-white);
}

.contact-info-card--highlight .contact-info-card__row-label {
    color: var(--color-white-alpha-75);
}

.contact-info-card--highlight .contact-info-card__row-value {
    color: var(--color-white);
}

.contact-info-card--highlight .contact-info-card__row-icon {
    background-color: var(--color-white-alpha-20);
    color: var(--color-white);
}

.contact-info-card--highlight .contact-info-card__row--link:hover {
    background-color: var(--color-white-alpha-20);
}

.contact-info-card--highlight .contact-info-card__row--link:hover .contact-info-card__row-icon {
    background-color: var(--color-white);
    color: var(--primary-color);
}

/* --- Responsive: ≤ 767px --- */

@media (max-width: 767px) {

    .contact-info-card {
        padding: 48px var(--spacing-lg) var(--spacing-lg);
    }

    .contact-info-card__icon-wrap,
    .contact-info-card__flag-wrap {
        top: -24px;
        width: 56px;
        height: 56px;
        font-size: var(--font-size-20);
    }
}

/* ===== END CONTACT INFORMATION SECTION ===== */

/* ============================================================
   ===== CONTACT US — CONSULTATION HUB SECTION
   (dedicated classes — does NOT reuse/modify the legacy
   .contact-us-form / .contact-page-contact-us-form classes,
   which several other templates still rely on)
============================================================ */

/* --- Outer premium container (.bg-card = light surface) --- */

.cv-hub-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    padding: var(--spacing-3xl) var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
}

/* Subtle blurred gradient accents in the corners */

.cv-hub-card::before,
.cv-hub-card::after {
    content: '';
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.cv-hub-card::before {
    width: 280px;
    height: 280px;
    top: -100px;
    left: -100px;
    background-color: var(--bg-overlay-medium);
}

.cv-hub-card::after {
    width: 320px;
    height: 320px;
    bottom: -120px;
    right: -120px;
    background-color: var(--bg-overlay-green);
}

.cv-hub-card__intro,
.cv-hub-form-wrap {
    position: relative;
    z-index: 1;
}

/* --- Top: Badge + Heading + Subtext --- */

.cv-hub-card__intro {
    max-width: 760px;
    margin: 0 auto;
}

.cv-hub-card__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--primary-color-xlight);
    color: var(--primary-color-dark);
    border-radius: var(--radius-full);
    font-size: var(--font-size-13);
    font-family: var(--font-semibold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.cv-hub-card__heading {
    font-size: var(--font-size-40);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

.cv-hub-card__heading p {
    margin-bottom: 0;
}

.cv-hub-card__subtext {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    max-width: 640px;
    margin: 0 auto;
}

.cv-hub-card__subtext p {
    margin-bottom: 0;
}

/* --- Trust row: horizontal pills --- */

.cv-hub-trust-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0;
    margin: var(--spacing-lg) 0 0;
}

.cv-hub-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-13);
    font-family: var(--font-semibold);
    color: var(--color-heading);
}

.cv-hub-trust-pill i {
    color: var(--secondary-green);
    font-size: var(--font-size-12);
}

/* --- Form: white elevated card, centered --- */

.cv-hub-form-wrap {
    max-width: 900px;
    margin: var(--spacing-2xl) auto 0;
}

.cv-hub-form-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.cv-hub-form-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.cv-hub-form-card form p {
    margin-bottom: var(--spacing-lg);
}

.cv-hub-form-card label {
    display: block;
    font-size: var(--font-size-14);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-xs);
}

.cv-hub-form-card .wpcf7-form-control-wrap {
    position: relative;
    display: block;
}

.cv-hub-form-card .wpcf7-form-control:not([type="submit"]) {
    width: 100%;
    min-height: 54px;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-15);
    font-family: var(--font-regular);
    color: var(--color-heading);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.cv-hub-form-card textarea.wpcf7-form-control {
    min-height: 140px;
    padding-top: var(--spacing-sm);
    resize: vertical;
}

.cv-hub-form-card select.wpcf7-form-control {
    appearance: none;
    padding-right: var(--spacing-xl);
    cursor: pointer;
}

.cv-hub-form-card .wpcf7-form-control-wrap:has(select)::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
    font-size: var(--font-size-12);
}

.cv-hub-form-card .wpcf7-form-control:not([type="submit"]):focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px var(--primary-color-xlight);
}

.cv-hub-form-card .wpcf7-not-valid {
    border-color: var(--secondary-red) !important;
}

.cv-hub-form-card .wpcf7-not-valid-tip {
    display: block;
    color: var(--secondary-red);
    font-size: var(--font-size-13);
    margin-top: var(--spacing-xs);
}

.cv-hub-form-card .wpcf7-response-output {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-14);
}

/* Submit button — matches the site's primary CTA button style, larger */

/* Submit sits in its own <p> — center that paragraph so the
   auto-width pill button lands in the middle instead of stretching full width */
.cv-hub-form-card form p:has(input.wpcf7-submit) {
    text-align: center;
    margin-bottom: 0;
}

.cv-hub-form-card input.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 260px;
    padding: 16px 32px;
    background-color: var(--primary-color);
    color: var(--color-white);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-17);
    font-family: var(--font-semibold);
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.cv-hub-form-card input.wpcf7-submit:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary);
}

.cv-hub-form-card input.wpcf7-submit:active {
    transform: translateY(-1px);
}

/* --- Responsive: ≤ 991px --- */

@media (max-width: 991px) {

    .cv-hub-card {
        padding: var(--spacing-2xl) var(--spacing-xl);
    }

    .cv-hub-card__heading {
        font-size: var(--font-size-32);
    }

    .cv-hub-form-card {
        padding: var(--spacing-xl);
    }
}

/* --- Responsive: ≤ 575px --- */

@media (max-width: 575px) {

    .cv-hub-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .cv-hub-card__heading {
        font-size: var(--font-size-26);
    }

    .cv-hub-form-card {
        padding: var(--spacing-lg);
    }
}

/* ===== END CONTACT US CONSULTATION HUB SECTION ===== */

/* ============================================================
   ===== SOLUTIONS DIFFERENCE SECTION
============================================================ */

.cv-card-box {
    background-color: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--spacing-20);
    box-shadow: var(--shadow-md);
    text-align: center;
    height: 100%;
}

.sol-diff-section {
    background-color: var(--color-white);
}

.cv-card-box__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-10);
}

.cv-card-box__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.cv-card-box__title {
    font-size: var(--font-size-20);
    line-height: var(--line-height-snug);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-sm);
}

.cv-card-box__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--color-desc);
    margin-bottom: 0;
}

/* --- Optional "Read More" arrow link (single-industries.php Service cards) --- */

.cv-card-box--with-link {
    position: relative;
    padding-bottom: calc(var(--spacing-card-p) + 24px);
}

.cv-card-box__link {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--spacing-md);
    display: block;
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-20);
    transition: color var(--transition-base), transform var(--transition-base);
}

.cv-card-box__link:hover {
    color: var(--primary-color-dark);
    transform: translateY(-2px);
}

/* ===== END SOLUTIONS DIFFERENCE SECTION ===== */

/* ============================================================
   ===== SOLUTIONS PRODUCTS SECTION
============================================================ */

.sol-products-section {
    background-color: var(--bg-card);
}

/* --- Compact overrides scoped to Related Products section only --- */

.sol-products-section .msh-card {
    padding: var(--spacing-20);
}

.sol-products-section .msh-card__img-wrap--bottom {
    margin-top: var(--spacing-md);
    min-height: 160px;
}

.sol-products-section .three-path-card__title {
    font-size: var(--font-size-20);
    margin-bottom: var(--spacing-sm);
}

.sol-products-section .three-path-card__desc {
    font-size: var(--font-size-17);
    margin-bottom: var(--spacing-sm);
}

@media (max-width: 991px) {
    .sol-products-section .msh-card__img-wrap--bottom {
        min-height: 140px;
    }
}

@media (max-width: 767px) {
    .sol-products-section .msh-card {
        padding: var(--spacing-md);
    }
    .sol-products-section .msh-card__img-wrap--bottom {
        min-height: 120px;
    }
}

.solution-product-description {
    font-size: var(--font-size-18);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-40);
    max-width: 1170px;
} 
.min-h-text-sol {
    min-height: 100px;
}

@media (max-width: 1199px) {
    .min-h-text-sol { min-height: 90px; }
}

@media (max-width: 991px) {
    .min-h-text-sol { min-height: 80px; }
}

@media (max-width: 767px) {
    .min-h-text-sol { min-height: 0; }
}

/* ===== END SOLUTIONS PRODUCTS SECTION ===== */

/* ============================================================
   ===== COMING NEXT SECTION
============================================================ */

.cv-card-box-left {
    border-radius: var(--radius-card);
    padding: var(--spacing-card-p);
    box-shadow: var(--shadow-xs);
    height: 100%;
}

.cv-card-box-left--bg-1 { background-color: var(--bg-card-blue-light); }
.cv-card-box-left--bg-2 { background-color: var(--bg-card-green-light); }
.cv-card-box-left--bg-3 { background-color: var(--bg-card-peach-light); }

/* ============================================================
   ===== SOLUTION INNER PAGE BANNER SECTION
============================================================ */

/* --- Background Gradient Utility ---
   Light blue base with a soft radial glow to match design.
   background-image layers on top of background-color in CSS. */

.bg-blue-greadient {
    background-color: var(--primary-color-xlight);
    background-image: radial-gradient(circle, rgba(0, 161, 241, 0.08) 0%, rgba(0, 161, 241, 0) 70%);
}

/* --- Section Wrapper --- */

.single-inner-page-banner-section {
    padding: 100px 0 70px;
    position: relative;
}

/* --- Heading & Description scoped overrides --- */

.sibp-heading {
    font-size: var(--font-size-56);
    margin-bottom: var(--spacing-md);
}

.sibp-desc {
    max-width: 100%;
    margin-bottom: 0;
}

/* --- Dual Badge Row --- */

.sibp-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-15);
    justify-content: space-between;
    margin-bottom: var(--spacing-card-item-mb);
}

.sibp-badge-star .fa-star {
    color: var(--secondary-yellow);
    font-size: var(--font-size-11);
    line-height: 1;
}

/* --- Feature Icons Row --- */

.sibp-features-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.sibp-feature-col {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    max-width: 185px;
    flex: 0 0 auto;
}

.sibp-feature-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-white);
    padding: var(--spacing-10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.sibp-feature-icon-wrap img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.sibp-feature-label {
    font-size: var(--font-size-16);
    font-family: var(--font-medium);
    color: var(--color-feature);
    line-height: var(--line-height-snug);
    padding-top: 2px;
}

/* --- Button Row --- */

.sibp-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

/* --- Banner Logo --- */

.sibp-logo-wrap {
    display: inline-block;
    margin-top: var(--spacing-lg);
}

.sibp-logo-wrap a {
    display: inline-block;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sibp-logo-wrap a:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.sibp-logo-img {
    display: block;
    height: auto;
    width: auto;
    border-radius: var(--radius-md);
}

/* --- Right Image Column --- */

.sibp-img-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sibp-hero-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
}

/* ── Responsive: XL (>= 1440px) ── */
@media (min-width: 1441px) {
    .sibp-feature-col {
        max-width: max-content;
    }
}
/* ── Responsive: XL (≤ 1440px) ── */
@media (max-width: 1440px) {
    .sibp-heading {
        font-size: var(--font-size-50);
    }
}

/* ── Responsive: LG (≤ 1199px) ── */

@media (max-width: 1199px) {
    .sibp-heading {
        font-size: var(--font-size-44);
    }
}

/* ── Responsive: MD (≤ 991px) ── */

@media (max-width: 991px) {
    .single-inner-page-banner-section {
        padding: 120px 0 40px;
    }
    .sibp-heading {
        font-size: var(--font-size-40);
    }
    .sibp-img-col {
        justify-content: center;
        margin-top: var(--spacing-xl);
    }
}

/* ── Responsive: SM (≤ 767px) ── */

@media (max-width: 767px) {
    .sibp-heading {
        font-size: var(--font-size-36);
    }
    .sibp-badge-row {
        justify-content: flex-start;
    }
    .sibp-features-row {
        gap: var(--spacing-md);
        margin: 16px auto;
    }
    .sibp-feature-col {
        max-width: none;
        flex: 0 0 calc(50% - var(--spacing-md));
    }
}

/* ── Responsive: XS (≤ 575px) ── */

@media (max-width: 575px) {
    .sibp-heading {
        font-size: var(--font-size-30);
    }
    .sibp-feature-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sibp-btn-row {
        align-items: flex-start;
    }
}

/* ===== END SOLUTION INNER PAGE BANNER SECTION ===== */

/* ===== END COMING NEXT SECTION ===== */

/* ============================================================
   ===== COMPLIANCE LOGOS SECTION
============================================================ */

/* --- Carousel wrapper: bottom room for nav arrows --- */

.compliance-logos-carousel {
    position: relative;
    padding-bottom: 56px;
}

/* --- Equal-height items: stretch all cards to tallest in the row --- */

.compliance-logos-carousel .owl-item {
    display: flex;
    align-items: stretch;
}

/* --- Logo Card --- */

.compliance-logo-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-20);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    box-shadow: var(--shadow-card-bottom);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    margin-bottom: 10px;
}

/* --- Logo image: fixed size cap so all logos render proportionally --- */

.compliance-logo-card__img {
    display: block;
    max-height: 72px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --- Owl Nav: sits in the padding strip below cards --- */

.compliance-logos-carousel .owl-nav {
    position: absolute;
    bottom: 8px;
    right: 0;
    display: flex;
    gap: var(--spacing-sm);
}

/* --- Hide dots --- */

.compliance-logos-carousel .owl-dots {
    display: none !important;
}

/* ── Responsive: SM (≤ 767px) ── */

@media (max-width: 767px) {
    .compliance-logos-carousel .owl-nav {
        left: 0;
        right: 0;
        justify-content: center;
    }
}

/* ===== END COMPLIANCE LOGOS SECTION ===== */

/* ============================================================
   ===== FAQ SECTION — SINGLE INNER PAGE
============================================================ */

/* --- Section Wrapper --- */

.faq-inner-section {
    background-color: var(--color-white);
}

/* --- Accordion Container: flex column for gap-based spacing --- */

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-14); /* 14px between items */
}

/* --- Hidden items (revealed by Show More) --- */

.faq-accordion__item--hidden {
    display: none;
}

/* --- Accordion Item (Bootstrap overrides) --- */

.faq-accordion .accordion-item {
    border: 1px solid var(--color-border-card) !important;
    border-radius: var(--radius-card) !important;
    background-color: var(--color-white);
    overflow: hidden;
    transition: background-color var(--transition-base);
    box-shadow: var(--shadow-md);
}

/* Open-state background on entire card — :has() is supported in all modern browsers */
.faq-accordion .accordion-item:has(.faq-accordion__btn:not(.collapsed)) {
    background-color: var(--bg-card);
}

/* --- Accordion Button --- */

.faq-accordion .faq-accordion__btn {
    font-size: var(--font-size-18);
    font-family: var(--font-bold);
    color: var(--color-heading);
    padding: var(--spacing-20); /* 20px */
    background-color: transparent;
    box-shadow: none;
    line-height: var(--line-height-snug);
}

.faq-accordion .faq-accordion__btn:not(.collapsed) {
    color: var(--color-heading);
    background-color: transparent;
    box-shadow: none;
    padding-bottom: var(--spacing-sm); /* 8px gap between title and description */
}

.faq-accordion .faq-accordion__btn:focus {
    box-shadow: none;
    outline: none;
}

/* --- Plus → Cross icon via ::after rotation --- */

.faq-accordion .faq-accordion__btn::after {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3v14M3 10h14' stroke='%23312B2B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--transition-slow);
    transform: rotate(0deg);
}

.faq-accordion .faq-accordion__btn:not(.collapsed)::after {
    transform: rotate(45deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3v14M3 10h14' stroke='%23312B2B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Accordion Body --- */

.faq-accordion__body {
    padding: 0 var(--spacing-20) var(--spacing-20);
}

.faq-accordion__body p {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: 15px;
}

.faq-accordion__body p b,
.faq-accordion__body p strong {
    font-family: var(--font-semibold);
    color: var(--color-heading);
}

.faq-accordion__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.faq-accordion__body ul li {
    position: relative;
    padding-left: 30px;
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

.faq-accordion__body ul li:last-child {
    margin-bottom: 0;
}

.faq-accordion__body ul li::before {
    content: "";
    background-image: url('../cv-images/png/check-icon.png');
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 4px;
    left: 0;
}

/* --- Show More Button Row --- */

.faq-show-more-wrap {
    margin-top: var(--spacing-xl); /* 32px */
}

/* ── Industries archive: hidden cards (beyond first 6) ── */
.ind-card--hidden {
    display: none;
}

/* ── Technologies archive: hidden cards (beyond first 6) ── */
.tec-card--hidden {
    display: none;
}

/* --- Responsive: LG (≤ 1199px) --- */

@media (max-width: 1199px) {
    .faq-accordion .faq-accordion__btn {
        font-size: var(--font-size-17);
    }
}

/* --- Responsive: MD (≤ 991px) --- */

@media (max-width: 991px) {
    .faq-accordion .faq-accordion__btn {
        font-size: var(--font-size-16);
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    .faq-accordion__body {
        padding: 0 var(--spacing-xl) var(--spacing-lg);
    }
}

/* --- Responsive: SM (≤ 767px) --- */

@media (max-width: 767px) {
    .faq-accordion .faq-accordion__btn {
        font-size: var(--font-size-16);
        padding: var(--spacing-md) var(--spacing-lg);
    }
    .faq-accordion__body {
        padding: 0 var(--spacing-lg) var(--spacing-md);
    }
}

/* --- Responsive: XS (≤ 575px) --- */

@media (max-width: 575px) {
    .faq-accordion .faq-accordion__btn {
        padding: var(--spacing-lg);
    }
    .faq-accordion__body {
        padding: 0 var(--spacing-lg) var(--spacing-md);
    }
}

/* ===== END FAQ SECTION ===== */

/* ============================================================
   ===== SOLUTION ANCHOR NAV
============================================================ */

/* --- Wrap: height placeholder when nav becomes sticky --- */

.sol-anchor-nav-wrap {
    position: relative;
}

/* --- Nav Bar --- */

.sol-anchor-nav {
    background-color: var(--bg-anchor-nav);
    width: 100%;
    z-index: calc(var(--z-sticky) - 1); /* below fixed header */
    transition: box-shadow var(--transition-base);
}

.sol-anchor-nav--sticky {
    position: fixed;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-md);
}

/* --- Horizontal scroll list --- */

.sol-anchor-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-card-item-mb); /* 20px */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
}

.sol-anchor-nav__list::-webkit-scrollbar {
    display: none;
}

/* --- Nav Item --- */

.sol-anchor-nav__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 18px var(--spacing-10); /* 23px top/bottom, 10px left/right */
    font-size: var(--font-size-18);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--transition-base), background-color var(--transition-base);
}

.sol-anchor-nav__item:hover {
    color: var(--primary-color);
}

/* --- Active tab --- */

.sol-anchor-nav__item.active {
    background-color: var(--color-white);
    color: var(--color-heading);
    border-radius: 0;
}

/* --- Responsive: LG (≤ 1199px) --- */

@media (max-width: 1199px) {
    .sol-anchor-nav__item {
        font-size: var(--font-size-16);
    }
}

/* --- Responsive: MD (≤ 991px) --- */

@media (max-width: 991px) {
    .sol-anchor-nav__item {
        font-size: var(--font-size-16);
        padding: 18px var(--spacing-sm);
    }
}

/* --- Responsive: SM (≤ 767px) --- */

@media (max-width: 767px) {
    .sol-anchor-nav__list {
        justify-content: flex-start;
    }
    .sol-anchor-nav__item {
        font-size: var(--font-size-16);
        padding: 14px var(--spacing-sm);
    }
}

/* ===== END SOLUTION ANCHOR NAV ===== */

/* ============================================================
   ===== RESOURCES & DOCUMENTATION SECTION
============================================================ */

/* --- Card --- */

.sol-res-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);    /* 40px */
    padding: var(--spacing-20);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* --- Icon Wrap --- */

.sol-res-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
    border-radius: var(--radius-xl);       /* 16px */
    padding: var(--spacing-sm);            /* 8px */
    margin-bottom: var(--spacing-md); /* 16px */
    flex-shrink: 0;
}

/* --- Icon --- */

.sol-res-card__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* --- Title --- */

.sol-res-card__title {
    font-size: var(--font-size-20);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-md); /* 16px */
}

/* --- Description --- */

.sol-res-card__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-card-item-mb); /* 20px */
    flex-grow: 1;
}

/* --- Responsive: MD (≤ 991px) --- */

@media (max-width: 991px) {
    .sol-res-card__title {
        font-size: var(--font-size-20);
    }
}

/* --- Responsive: SM (≤ 767px) --- */

@media (max-width: 767px) {
    .sol-res-card {
        padding: var(--spacing-md);
    }
}

/* ===== END RESOURCES & DOCUMENTATION SECTION ===== */

/* ============================================================
   ===== PLANS SECTION
============================================================ */

.sol-plans-section {
    background-color: var(--color-white);
}

/* --- Outer Card --- */

.sol-plan-card {
    background-color: var(--color-border-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-card);;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- Card Header (tier label area) --- */

.sol-plan-card__header {
    padding: var(--spacing-md) var(--spacing-20);
    text-align: center;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.sol-plan-card--pro {
    background-color: var(--bg-anchor-nav);
    border: 1px solid var(--bg-anchor-nav);
}

.sol-plan-card__tier {
    font-size: var(--font-size-24);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1;
}

/* --- Inner White Box --- */

.sol-plan-card__body {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-20);
    margin: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* --- Label (GET STARTED / FULL ACCESS) --- */

.sol-plan-card__label {
    font-size: var(--font-size-16);
    font-family: var(--font-bold);
    color: var(--color-desc);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin-bottom: 0;
}

/* --- Plan Name --- */

.sol-plan-card__name {
    font-size: var(--font-size-20);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: 0;
}

/* --- Price Row --- */

.sol-plan-card__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.sol-plan-card__price {
    font-size: var(--font-size-40);
    font-family: var(--font-bold);
    color: var(--color-heading);
    line-height: 1;
}

.sol-plan-card__period {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-footer-social);
}

/* --- Description --- */

.sol-plan-card__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* --- CTA Button (full width) --- */

.sol-plan-card__btn {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
}

/* --- Features List --- */

.sol-plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.sol-plan-card__feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
}

.sol-plan-card__check {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/* --- Responsive: MD (≤ 991px) --- */

@media (max-width: 991px) {
    .sol-plan-card__price {
        font-size: var(--font-size-34);
    }
}

/* --- Responsive: SM (≤ 767px) --- */

@media (max-width: 767px) {
    .sol-plan-card__header {
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    .sol-plan-card__body {
        margin: 0 var(--spacing-sm) var(--spacing-sm);
        padding: var(--spacing-lg);
    }
    .sol-plan-card__price {
        font-size: var(--font-size-30);
    }
}

/* ===== END PLANS SECTION ===== */

/* ============================================================
   ===== CTA PAGE SECTION
============================================================ */

/* --- Inner Card (gradient banner) --- */

.cta-page-inner {
    position: relative;
    overflow: hidden;
    background: url('../cv-images/png/abstract-cta-image.png') right center / auto 100% no-repeat,
                var(--bg-cta-page);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl) var(--spacing-40);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

/* --- Icon Column --- */

.cta-page-icon-col {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.cta-page-icon-wrap {
    width: 96px;
    height: 96px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-page-icon-box {
    background-color: var(--color-white);
    padding: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-page-product-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* --- Content Column --- */

.cta-page-content {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.cta-page-title {
    font-size: var(--font-size-26);
    font-family: var(--font-extrabold);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-snug);
}

.cta-page-desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-white-alpha-85);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-relaxed);
}

/* When .cta-page-content echoes a WYSIWYG field directly (e.g. single-industries.php)
   instead of hand-written .cta-page-title/.cta-page-desc markup, style its own tags. */

.cta-page-content h2 {
    font-size: var(--font-size-26);
    font-family: var(--font-extrabold);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-snug);
}

.cta-page-content p {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-white-alpha-85);
    margin-bottom: 0;
    line-height: var(--line-height-relaxed);
}

@media (max-width: 1199px) {
    .cta-page-content h2 {
        font-size: var(--font-size-22);
        margin-bottom: var(--spacing-sm);
    }
}

@media (max-width: 767px) {
    .cta-page-content h2 {
        font-size: var(--font-size-24);
    }
}

/* --- Actions Column --- */

.cta-page-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* --- Responsive: LG (≤ 1199px) --- */

@media (max-width: 1199px) {
    .cta-page-inner {
        padding: var(--spacing-card-p);
        gap: var(--spacing-lg);
    }
}

/* --- Responsive: MD (≤ 991px) --- */

@media (max-width: 991px) {
    .cta-page-inner {
        background: var(--bg-cta-page);
    }
    .cta-page-title {
        font-size: var(--font-size-22);
        margin-bottom: var(--spacing-sm);
    }
    .cta-page-actions {
        width: 100%;
    }
}

/* --- Responsive: SM (≤ 767px) --- */

@media (max-width: 767px) {
    .cta-page-inner {
        padding: var(--spacing-card-p) var(--spacing-lg);
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-lg);
    }
    .cta-page-content {
        flex: none;
    }
    .cta-page-title {
        font-size: var(--font-size-24);
    }
    .cta-page-actions {
        justify-content: center;
    }
}

/* ===== END CTA PAGE SECTION ===== */

/* ============================================================
   ===== PRODUCT GALLERY SECTION
============================================================ */

/* --- Gallery Item --- */

.sol-gallery-item {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-slow),
                box-shadow var(--transition-slow);
    outline: none;
}

.sol-gallery-item:hover,
.sol-gallery-item:focus-visible {
    transform: scale(1.03);
    box-shadow: var(--shadow-xl);
}

.sol-gallery-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* --- Lightbox Overlay --- */

.sol-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
                visibility var(--transition-base);
    pointer-events: none;
}

.sol-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sol-lightbox__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.88);
}

.sol-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 90vh;
    transform: scale(0.92);
    transition: transform var(--transition-base);
}

.sol-lightbox.is-open .sol-lightbox__dialog {
    transform: scale(1);
}

.sol-lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-xl);
    object-fit: contain;
    box-shadow: var(--shadow-xl);
    transition: opacity var(--transition-fast);
}

.sol-lightbox__close {
    position: absolute;
    top: calc(-1 * var(--spacing-2xl));
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--primary-dark);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-16);
    transition: background-color var(--transition-base),
                transform var(--transition-base);
    z-index: 2;
}

.sol-lightbox__close:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
    transform: rotate(90deg);
}

/* ── Lightbox prev / next nav buttons ── */
.sol-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: calc(var(--z-modal) + 1);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background-color: var(--color-white-alpha-85);
    color: var(--primary-dark);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-18);
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.sol-lightbox__nav:hover {
    background-color: var(--color-white);
    transform: translateY(-50%) scale(1.1);
}

.sol-lightbox__prev { left: var(--spacing-xl); }
.sol-lightbox__next { right: var(--spacing-xl); }

/* ── Lightbox image counter ── */
.sol-lightbox__counter {
    margin: var(--spacing-sm) 0 0;
    text-align: center;
    color: var(--color-white-alpha-75);
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
}

/* ── Responsive — LG (≤1199px) ── */
@media (max-width: 1199px) {
    .sol-lightbox__img {
        max-width: 88vw;
        max-height: 78vh;
    }
}

/* ── Responsive — MD (≤991px) ── */
@media (max-width: 991px) {
    .sol-lightbox__img {
        max-width: 90vw;
        max-height: 72vh;
    }
    .sol-lightbox__prev { left: var(--spacing-lg); }
    .sol-lightbox__next { right: var(--spacing-lg); }
}

/* ── Responsive — SM (≤767px) ── */
@media (max-width: 767px) {
    .sol-lightbox__img {
        max-width: 92vw;
        max-height: 65vh;
        border-radius: var(--radius-lg);
    }
    .sol-lightbox__prev { left: var(--spacing-sm); }
    .sol-lightbox__next { right: var(--spacing-sm); }
    .sol-lightbox__nav  { width: 36px; height: 36px; font-size: var(--font-size-14); }
    .sol-lightbox__close {
        top: calc(-1 * var(--spacing-xl));
        width: 32px;
        height: 32px;
        font-size: var(--font-size-14);
    }
    .sol-lightbox__counter { font-size: var(--font-size-13); }
}

/* ── Responsive — XS (≤575px) ── */
@media (max-width: 575px) {
    .sol-lightbox__img {
        max-width: 95vw;
        max-height: 58vh;
    }
    .sol-lightbox__prev { left: var(--spacing-5); }
    .sol-lightbox__next { right: var(--spacing-5); }
    .sol-lightbox__nav  { width: 32px; height: 32px; font-size: var(--font-size-13); }
}

/* ===== END PRODUCT GALLERY SECTION ===== */


/* ============================================================
   ===== BLOG SINGLE — HERO BANNER
============================================================ */

.cv-single-hero {
    padding-top: 110px; /* matches fixed header height — same as sol-banner-section */
    padding-bottom: var(--spacing-2xl);
    background-color: var(--color-bg);
}

.cv-single-hero__title {
    font-size: var(--font-size-54);
    line-height: 68px;
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

.cv-single-hero__title-hl {
    color: var(--primary-color);
}

/* ── Responsive ── */

@media (max-width: 1199px) {
    .cv-single-hero__title {
        font-size: var(--font-size-46);
        line-height: 60px;
    }
}

@media (max-width: 991px) {
    .cv-single-hero {
        padding-top: 110px;
        padding-bottom: var(--spacing-xl);
    }
    .cv-single-hero__title {
        font-size: var(--font-size-38);
        line-height: 52px;
    }
}

@media (max-width: 767px) {
    .cv-single-hero {
        padding-top: 130px;
    }
    .cv-single-hero__title {
        font-size: var(--font-size-30);
        line-height: 42px;
    }
}

@media (max-width: 575px) {
    .cv-single-hero__title {
        font-size: var(--font-size-26);
        line-height: 36px;
    }
}

/* ===== END BLOG SINGLE HERO BANNER ===== */

/* ============================================================
   BLOG SINGLE — BODY SECTION
============================================================ */

.cv-single-body {
    background-color: var(--color-bg);
}

/* ===== END BLOG SINGLE BODY SECTION ===== */


/* ============================================================
   ===== BLOG SINGLE — FEATURED IMAGE & META BAR
============================================================ */

.cv-single-content-wrap {
    margin-bottom: var(--spacing-lg);
}

/* ── Featured image: top corners rounded only ── */
.cv-single-image-wrap {
    border: 1px solid var(--color-border-card);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.cv-single-image {
    width: 100%;
    display: block;
    border-radius: 20px 20px 0 0;
}

/* ── Meta bar below image ── */
.cv-single-meta {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-md);
    padding: 14px var(--spacing-lg);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-card);
}

.cv-single-meta__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    align-self: center;
}

.cv-single-meta__avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.cv-single-meta__name {
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--color-body-text);
    margin: 0;
    line-height: 1.3;
}

.cv-single-meta__date {
    font-size: var(--font-size-12);
    font-family: var(--font-regular);
    color: var(--color-muted);
    margin: 0;
}

/* ── Vertical separator ── */
.cv-single-meta__sep {
    display: block;
    width: 1px;
    height: auto;
    align-self: stretch;
    background-color: var(--color-border-card);
    flex-shrink: 0;
}

/* ── Category link ── */
.cv-single-meta__cat {
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--primary-color);
    text-decoration: none;
    align-self: center;
}

.cv-single-meta__cat:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* ===== END BLOG SINGLE FEATURED IMAGE & META BAR ===== */

/* ============================================================
   ===== BLOG SINGLE — TABLE OF CONTENTS
============================================================ */

.cv-toc-wrap {
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

/* ── Header bar ── */
.cv-toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--spacing-lg);
    background: linear-gradient(to right, var(--primary-color), var(--primary-gradient-end));
    border: none;
    cursor: pointer;
    text-align: left;
}

.cv-toc-head__title {
    font-size: var(--font-size-16);
    font-family: var(--font-semibold);
    color: var(--color-white);
}

.cv-toc-icon-menu {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    margin: 0 0 0 auto !important;
    flex-shrink: 0;
    object-fit: contain;
}

.cv-toc-icon-close {
    display: none;
    color: var(--color-white);
    font-size: 20px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Swap icons on open ── */
.cv-toc-head[aria-expanded="true"] .cv-toc-icon-menu {
    display: none !important;
}

.cv-toc-head[aria-expanded="true"] .cv-toc-icon-close {
    display: inline-block;
}

/* ── Body (list) ── */
.cv-toc-body {
    max-height: 800px;
    overflow: hidden;
    padding: 0;
    background-color: var(--color-white);
    transition: max-height 0.4s ease;
}

.cv-toc-body.cv-toc-closed {
    max-height: 0;
}

.cv-toc-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ── Top-level items ── */
.cv-toc-body > ul > li {
    position: relative;
    padding: 12px var(--spacing-lg) 12px 52px;
    border-bottom: 1px solid var(--color-border-card);
    transition: background-color 0.2s;
}

.cv-toc-body > ul > li:last-child {
    border-bottom: none;
}

.cv-toc-body > ul > li:hover {
    background-color: var(--primary-color-xlight);
}

/* Icon fixed to top — aligns with text even when li has nested children */
.cv-toc-body > ul > li::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    color: var(--primary-color);
    position: absolute;
    left: var(--spacing-lg);
    top: 14px;
    font-size: var(--font-size-16);
    line-height: 1.5;
}

.cv-toc-body > ul > li > a {
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-heading);
    text-decoration: none;
    display: block;
    line-height: 1.6;
    transition: color 0.2s;
}

.cv-toc-body > ul > li:hover > a {
    color: var(--primary-color);
}

/* ── Parent li that has nested children ── */
.cv-toc-body > ul > li:has(> ul) {
    padding-bottom: 6px;
}

/* ── Nested h3 items — left accent border style ── */
.cv-toc-body ul ul {
    list-style: none;
    margin: 6px 0 4px 20px;
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--primary-color);
}

.cv-toc-body ul ul li {
    padding: 5px 0;
    border-bottom: none;
}

.cv-toc-body ul ul li::before {
    display: none;
}

.cv-toc-body ul ul li a {
    font-size: var(--font-size-12);
    font-family: var(--font-regular);
    color: var(--color-body-text);
    text-decoration: none;
    line-height: 1.5;
    display: block;
    transition: color 0.2s;
}

.cv-toc-body ul ul li a:hover {
    color: var(--primary-color);
}

/* ===== END BLOG SINGLE TABLE OF CONTENTS ===== */

/* ============================================================
   ===== BLOG SINGLE — CONTENT AREA
============================================================ */

.cv-content-area {
    font-size: var(--font-size-18);
    line-height: 36px;
    font-family: var(--font-regular);
    color: var(--color-heading);
    padding: var(--spacing-card-p);
    background-color: var(--color-white);
    border-radius: 0 0 20px 20px;
    border: 1px solid var(--color-border-card);
}

@media (max-width: 1199px) {
    .cv-content-area { padding: var(--spacing-lg); }
}

@media (max-width: 991px) {
    .cv-content-area { padding: var(--spacing-md); }
}

@media (max-width: 767px) {
    .cv-content-area { padding: var(--spacing-md) var(--spacing-sm); }
}

.cv-content-area img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.cv-content-area img.align-left {
    margin: 0;
}

.cv-content-area h2 {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-26);
    line-height: 36px;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.cv-content-area h3 {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-24);
    line-height: 36px;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.cv-content-area h4 {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-20);
    line-height: 22px;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.cv-content-area p {
    font-family: var(--font-regular);
    font-size: var(--font-size-18) !important;
    line-height: 30px;
    color: var(--color-body-text);
}

.cv-content-area p:not(:last-child) {
    margin-bottom: 15px;
}

.cv-content-area strong {
    font-family: var(--font-semibold);
}

.cv-content-area a {
    color: var(--primary-color);
    font-family: var(--font-semibold);
}

.cv-content-area a:hover {
    color: var(--primary-color);
}

.cv-content-area ul {
    margin-bottom: 20px;
    list-style: none;
    padding: 0;
}

.cv-content-area ol {
    margin-left: 30px;
    padding-left: 30px;
    margin-bottom: 20px;
}

.cv-content-area ol li {
    padding-left: 5px;
}

.cv-content-area ul li {
    position: relative;
    padding-left: 40px;
    font-size: var(--font-size-18);
    line-height: 30px;
    color: var(--color-body-text);
}

.cv-content-area ul li::before {
    content: "";
    background-image: url('../cv-images/png/check-icon.png');
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 6px;
    left: 0;
}

/* ── Restore TOC list items inside cv-content-area (higher specificity wins) ── */
.cv-content-area .cv-toc-body > ul > li::before {
    content: "\f105";
    background-image: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    color: var(--primary-color);
    width: auto;
    height: auto;
    top: 14px;
    transform: none;
    left: var(--spacing-lg);
    font-size: var(--font-size-16);
}

.cv-content-area .cv-toc-body ul ul li::before {
    display: none;
}


/* ===== END BLOG SINGLE CONTENT AREA ===== */

/* ============================================================
   ===== BLOG SINGLE — RELATED ARTICLES
============================================================ */

.cv-related-section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    background-color: var(--color-white);
}

.cv-related-section .section-title {
    font-size: var(--font-size-38);
    margin-bottom: var(--spacing-xl);
}


@media (max-width: 991px) {
    .cv-related-section { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
}

@media (max-width: 767px) {
    .cv-related-section .section-title { font-size: var(--font-size-30); }
}

/* ===== END BLOG SINGLE RELATED ARTICLES ===== */

/* ============================================================
   ===== BLOG SINGLE — FAQ SECTION
============================================================ */

.cv-single-faq {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
}

.cv-single-faq__title {
    font-size: var(--font-size-38);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1.2;
    margin-bottom: var(--spacing-xl);
}

@media (max-width: 991px) {
    .cv-single-faq__title { font-size: var(--font-size-32); }
}

@media (max-width: 767px) {
    .cv-single-faq { margin-top: var(--spacing-xl); }
    .cv-single-faq__title { font-size: var(--font-size-26); margin-bottom: var(--spacing-lg); }
}

.cv-single-faq .accordion-item:has(.faq-accordion__btn:not(.collapsed)) {
    background-color: var(--color-white);
}

/* List items inside FAQ answers */
.blog-faq .faq-accordion__body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.blog-faq .faq-accordion__body ul li {
    position: relative;
    padding-left: 30px;
    font-size: var(--font-size-16);
    line-height: 30px;
    color: var(--color-body-text);
}

.blog-faq .faq-accordion__body ul li::before {
    content: "";
    display: block;
    background-image: url('../cv-images/png/check-icon.png');
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* ===== END BLOG SINGLE FAQ SECTION ===== */

/* ============================================================
   BLOG SINGLE — SIDEBAR RECENT POSTS
============================================================ */

.cv-sb-recent {
    padding: var(--spacing-card-p);
    border-radius: var(--radius-logo);
    border: 1px solid var(--color-border-card);
    background: var(--color-white);
    margin-bottom: var(--spacing-card-item-mb);
}

.cv-sb-recent__title {
    font-size: var(--font-size-24);
    line-height: 32px;
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-card-item-mb);
}

.cv-sb-recent__item {
    display: block;
    padding: var(--spacing-card-item-mb);
    border-radius: 10px;
    border: 1px solid var(--primary-color-bg);
    background-color: var(--primary-color-bg);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
    transform: translateY(0);
    box-shadow: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.cv-sb-recent__item:last-child {
    margin-bottom: 0;
}

.cv-sb-recent__item:hover {
    border-color: var(--primary-color);
    background-color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 161, 241, 0.12);
}

.cv-sb-recent__item-title {
    font-size: var(--font-size-16);
    line-height: 26px;
    font-family: var(--font-regular);
    color: var(--color-heading);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

.cv-sb-recent__item:hover .cv-sb-recent__item-title {
    color: var(--primary-color);
}

/* ===== END BLOG SINGLE SIDEBAR RECENT POSTS ===== */

/* ============================================================
   BLOG SINGLE — SIDEBAR CONTACT FORM
============================================================ */

.cv-sb-contact {
    padding: var(--spacing-card-p);
    border-radius: var(--radius-logo);
    border: 1px solid var(--color-border-card);
    background: var(--color-white);
    margin-top: var(--spacing-card-item-mb);
}

.cv-sb-contact__title {
    font-size: var(--font-size-24);
    line-height: 32px;
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-card-item-mb);
}

/* Force all CF7 columns full-width inside narrow sidebar */
.cv-sb-contact .wpcf7-form .row {
    margin: 0;
}

.cv-sb-contact .wpcf7-form .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.cv-sb-contact .wpcf7-form .row > [class*="col-"]:last-child {
    margin-bottom: 0;
}

/* Reset old spacing utility class */
.cv-sb-contact .all-section-space-cfrm {
    margin: 0;
    padding: 0;
}

.cv-sb-contact .form-group {
    margin: 0;
}

/* Hide CF7 label text — placeholder acts as visual label */
.cv-sb-contact label {
    display: block;
    font-size: 0;
    line-height: 0;
    margin: 0;
}

/* Form inputs & textarea */
.cv-sb-contact .form-control {
    display: block;
    width: 100%;
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-heading);
    background-color: var(--primary-color-bg);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 13px var(--spacing-md);
    outline: none;
    box-shadow: none;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.cv-sb-contact .form-control::placeholder {
    font-size: var(--font-size-14);
    font-family: var(--font-regular);
    color: var(--color-body-text);
}

.cv-sb-contact .form-control:focus {
    background-color: var(--color-white);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 161, 241, 0.10);
    outline: none;
}

.cv-sb-contact textarea.form-control {
    resize: none;
    min-height: 100px;
}

/* Validation error state */
.cv-sb-contact .wpcf7-not-valid .form-control,
.cv-sb-contact .form-control[aria-invalid="true"] {
    border-color: var(--secondary-red) !important;
    background-color: var(--color-white);
}

.cv-sb-contact .wpcf7-not-valid-tip {
    display: block;
    font-size: var(--font-size-12);
    font-family: var(--font-regular);
    color: var(--secondary-red);
    margin-top: 4px;
}

/* Submit row — center button, spinner sits right of it */
.cv-sb-contact .col-md-12 > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-left: 80px;
}

/* Submit button — matches cv-primary-button style */
.cv-sb-contact .wpcf7-submit,
.cv-sb-contact input.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 140px;
    margin: 0;
    padding: var(--spacing-10) var(--spacing-card-p);
    background-color: var(--primary-color);
    color: var(--color-white);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-18);
    font-family: var(--font-bold);
    line-height: var(--line-height-relaxed);
    cursor: pointer;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base);
}

.cv-sb-contact .wpcf7-submit:hover,
.cv-sb-contact input.btn-secondary:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 161, 241, 0.40);
}

.cv-sb-contact .wpcf7-submit:active,
.cv-sb-contact input.btn-secondary:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 161, 241, 0.30);
}

/* CF7 response message */
.cv-sb-contact .wpcf7-response-output {
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-13);
    font-family: var(--font-regular);
    border: none;
}

/* ===== END BLOG SINGLE SIDEBAR CONTACT FORM ===== */

/* ============================================================
   BLOG SINGLE — SIDEBAR SOCIAL LINKS
============================================================ */

.cv-sb-social {
    padding: var(--spacing-card-p);
    border-radius: var(--radius-logo);
    border: 1px solid var(--color-border-card);
    background: var(--color-white);
    margin-top: var(--spacing-card-item-mb);
}

.cv-sb-social__title {
    font-size: var(--font-size-24);
    line-height: 32px;
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-card-item-mb);
}

.cv-sb-social__icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.cv-sb-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.cv-sb-social__link:hover {
    transform: scale(1.15) translateY(-3px);
}

.cv-sb-social__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
    display: block;
}

/* ===== END BLOG SINGLE SIDEBAR SOCIAL LINKS ===== */

/* ============================================================
   ===== ABOUT US — VALUE CARD COLORS
============================================================ */

.cv-card-box-left--bg-1 { background-color: var(--bg-card-blue); }
.cv-card-box-left--bg-2 { background-color: var(--bg-card-yellow); }
.cv-card-box-left--bg-3 { background-color: var(--bg-card-green); }
.cv-card-box-left--bg-4 { background-color: var(--bg-card-red); }

/* ===== END ABOUT US VALUE CARD COLORS ===== */

/* ============================================================
   ===== ABOUT US — UTILITY
============================================================ */

.cv-desc-wide {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== END ABOUT US UTILITY ===== */

/* ============================================================
   ===== ABOUT US — ACCREDITATIONS SECTION
============================================================ */

.cv-accreditation-section .logo-card {
    height: 100px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cv-accreditation-section .logo-card__img {
    width: auto;
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    display: block;
    margin: auto;
}

.cv-accreditation-section .logo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ===== END ABOUT US ACCREDITATIONS SECTION ===== */

/* ============================================================
   ===== TESTIMONIAL LISTING PAGE
============================================================ */

.cv-ts-listing-section .ts-card {
    height: 100%;
}

/* ===== END TESTIMONIAL LISTING PAGE ===== */

/* ============================================================
   ===== ENGAGEMENT MODEL INTRO SECTION
============================================================ */

.cv-em-intro-section {
    background-color: var(--bg-white);
}

.cv-em-intro__heading {
    margin-bottom: 0;
}

.cv-em-intro__subtitle {
    font-size: var(--font-size-24);
    font-family: var(--font-bold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--primary-color);
    margin-bottom: var(--spacing-lg);
}

.cv-em-intro__desc {
    color: var(--color-desc);
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    line-height: var(--line-height-relaxed);
}

.cv-em-intro__desc p {
    margin-bottom: var(--spacing-md);
}

.cv-em-intro__desc p:last-child {
    margin-bottom: 0;
}

.cv-em-intro__img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-em-intro__img-blob {
    position: absolute;
    width: 85%;
    height: 85%;
    background: radial-gradient(circle, var(--bg-overlay) 0%, transparent 70%);
    border-radius: var(--radius-full);
    z-index: 0;
}

.cv-em-intro__img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: var(--radius-xl);
}

@media (max-width: 991px) {
    .cv-em-intro__heading {
        margin-bottom: var(--spacing-xl);
    }
}

@media (max-width: 767px) {
    .cv-em-intro__subtitle {
        font-size: var(--font-size-20);
    }
}

/* ===== END ENGAGEMENT MODEL INTRO SECTION ===== */

/* ============================================================
   ===== ENGAGEMENT MODEL CARD SECTIONS
============================================================ */

/* Compact padding for model sections */
.cv-em-model-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Content card */
.cv-em-model__content {
    background-color: var(--bg-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-card);
    border-top: 3px solid var(--primary-color);
    position: relative;
    overflow: hidden;
}

.cv-em-model__content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at top right, var(--bg-overlay) 0%, transparent 70%);
    pointer-events: none;
}

/* Badge — model number */
.cv-em-model__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-12);
    font-family: var(--font-bold);
    color: var(--primary-color);
    background-color: var(--primary-color-xlight);
    border-radius: var(--radius-full);
    padding: var(--spacing-xs) var(--spacing-10);
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--spacing-md);
}

.cv-em-model__title {
    font-size: var(--font-size-24);
    font-family: var(--font-bold);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-md);
}

.cv-em-model__desc {
    color: var(--color-desc);
    font-family: var(--font-regular);
    font-size: var(--font-size-15);
    line-height: var(--line-height-relaxed);
}

.cv-em-model__desc p {
    margin-bottom: var(--spacing-md);
}

.cv-em-model__desc p:last-child {
    margin-bottom: 0;
}

.cv-em-model__desc ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cv-em-model__desc li {
    position: relative;
    padding-left: 28px;
    color: var(--color-desc);
    font-size: var(--font-size-15);
    line-height: var(--line-height-normal);
}

.cv-em-model__desc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-image: url('../cv-images/png/check-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Image */
.cv-em-model__img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-em-model__img-blob {
    position: absolute;
    width: 85%;
    height: 85%;
    background: radial-gradient(circle, var(--bg-overlay) 0%, transparent 70%);
    border-radius: var(--radius-full);
    z-index: 0;
}

.cv-em-model__img {
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 991px) {
    .cv-em-model-section {
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-3xl);
    }

    .cv-em-model__content {
        padding: var(--spacing-xl);
    }

    .cv-em-model__img {
        max-height: 300px;
    }
}

@media (max-width: 767px) {
    .cv-em-model__title {
        font-size: var(--font-size-20);
    }

    .cv-em-model__content {
        padding: var(--spacing-lg);
    }

    .cv-em-model__img {
        max-height: 250px;
    }
}

/* ============================================================
   ===== CASE STUDY SINGLE — HERO (premium two-column redesign)
   Dedicated .cs-hero-* classes — the .cv-case-hero-banner block
   right below this one is intentionally untouched, since
   single-industries / single-technologies / single-hire-developer
   still use it for their own hero sections.
============================================================ */

.cs-hero-section {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-4xl) 0 var(--spacing-2xl);
    background-color: var(--bg-hero);
}

/* Soft blurred gradient blobs — the only decorative texture, kept minimal */
.cs-hero-section__glow {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.cs-hero-section__glow--a {
    width: 380px;
    height: 380px;
    top: -140px;
    right: 8%;
    background-color: var(--bg-overlay-medium);
}

.cs-hero-section__glow--b {
    width: 320px;
    height: 320px;
    bottom: -120px;
    left: 4%;
    background-color: var(--bg-overlay-green);
}

.cs-hero-section .container {
    position: relative;
    z-index: 1;
}

/* --- Left: Content --- */
/* Badge reuses the shared .hero-section__subtitle pill (with pulsing
   dot) and the title reuses the shared .section-title / .section-title-highlight
   classes — both already styled and responsive sitewide, no dedicated
   .cs-hero__badge / __title rules needed here. */

/* Same shared .cv-case-hero-anim margin-bottom !important as below —
   scoped override so this h1 isn't forced to a 20px bottom margin. */
.cs-hero__content .section-title.cv-case-hero-anim {
    margin-bottom: 0 !important;
}

.cs-hero__summary {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-15);
}

/* The shared .cv-case-hero-anim entrance-animation class (also used
   by other hero sections) carries its own margin-bottom !important —
   this scoped, equally-forceful override wins only on this element. */
.cs-hero__summary.cv-case-hero-anim {
    margin-bottom: var(--spacing-15) !important;
}

/* Only takes effect if the field is later switched to WYSIWYG
   (which auto-wraps content in <p>) — plain text has no <p> at all. */
.cs-hero__summary p {
    margin-bottom: var(--spacing-15);
}

.cs-hero__summary ul,
.cs-hero__summary ol {
    margin-bottom: var(--spacing-15);
    padding-left: 0;
}

.cs-hero__summary ul {
    list-style: none;
}

.cs-hero__summary ul li {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-16);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
}

.cs-hero__summary ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
}

.cs-hero__summary ol {
    padding-left: var(--spacing-xl);
}

.cs-hero__summary ol li {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-16);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
}

.cs-hero__summary strong,
.cs-hero__summary b {
    font-family: var(--font-semibold);
    color: var(--color-heading);
}

.cs-hero__summary a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* --- Meta row: Country / Industry / Technologies --- */

.cs-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg) var(--spacing-xl);
}

.cs-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    padding-right: var(--spacing-xl);
}

.cs-hero__meta-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 0;
    width: 1px;
    height: 34px;
    background-color: var(--color-border);
}

.cs-hero__meta-item--tech {
    flex: 1 1 100%;
    padding-right: 0;
}

.cs-hero__meta-item--tech::after {
    display: none;
}

.cs-hero__meta-label {
    font-size: var(--font-size-12);
    font-family: var(--font-semibold);
    color: var(--color-muted);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
}

.cs-hero__meta-value {
    font-size: var(--font-size-16);
    font-family: var(--font-bold);
    color: var(--color-heading);
}

.cs-hero__tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: 4px;
}

.cs-hero__tech-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--spacing-md);
    background-color: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-13);
    font-family: var(--font-semibold);
    color: var(--primary-dark);
}

/* --- Right: Featured image --- */

.cs-hero__image-wrap {
    position: relative;
}

.cs-hero__image-card {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-card);
}

.cs-hero__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* --- Business Impact / KPI row --- */

.cs-hero-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.cs-hero-kpi {
    flex: 1 1 0%;
    min-width: 200px;
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cs-hero-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--hiw-accent, var(--primary-color));
}

.cs-hero-kpi:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.cs-hero-kpi__number {
    display: block;
    font-size: var(--font-size-36);
    font-family: var(--font-extrabold);
    color: var(--hiw-accent, var(--primary-color));
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.cs-hero-kpi__title {
    font-size: var(--font-size-15);
    font-family: var(--font-bold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-xs);
}

.cs-hero-kpi__desc {
    font-size: var(--font-size-13);
    font-family: var(--font-regular);
    color: var(--color-muted);
    line-height: var(--line-height-normal);
    margin-bottom: 0;
}

.cs-hero-kpi--blue   { --hiw-accent: var(--primary-color); }
.cs-hero-kpi--purple { --hiw-accent: var(--secondary-red); }
.cs-hero-kpi--cyan   { --hiw-accent: var(--secondary-green); }
.cs-hero-kpi--green  { --hiw-accent: var(--secondary-yellow); }

/* --- Responsive --- */
/* Title sizing otherwise comes from the shared .section-title
   responsive rules — only the 1440 tier is nudged smaller here,
   scoped so it doesn't leak into .section-title's own smaller tiers. */

@media (min-width: 1200px) and (max-width: 1440px) {
    .cs-hero__content .section-title { font-size: var(--font-size-30); }
}

@media (max-width: 991px) {
    .cs-hero-section { padding: var(--spacing-5xl) 0 var(--spacing-xl); }
    .cs-hero__content { max-width: 100%; }
    .cs-hero-kpi-row { margin-top: var(--spacing-lg); }
}

@media (max-width: 767px) {
    .cs-hero-section { padding: var(--spacing-5xl) 0 var(--spacing-lg); }
    .cs-hero-kpi { flex: 1 1 calc(50% - var(--spacing-lg)); }
}

@media (max-width: 575px) {
    .cs-hero__meta-item { padding-right: var(--spacing-lg); }
    .cs-hero-kpi { flex: 1 1 100%; }
}

/* ===== END CASE STUDY SINGLE — HERO (premium redesign) ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — HERO
   Featured image as a full-bleed background with a white-to-transparent
   overlay (badge + title sit on the white side, image "reveals" on the
   right), plus a soft entrance animation.
============================================================ */

.cv-case-hero-banner {
    position: relative;
    overflow: hidden;
    padding: 140px 0 70px;
    background-color: var(--bg-section);
}

.cv-case-hero-banner__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
}

.cv-case-hero-banner__overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.94) 40%,
        rgba(255, 255, 255, 0.55) 60%,
        rgba(255, 255, 255, 0) 78%
    );
    z-index: 1;
}

.cv-case-hero-banner > .container {
    position: relative;
    z-index: 2;
}

.cv-case-hero-banner__title {
    font-size: var(--font-size-42);
    line-height: 60px;
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    max-width: 700px;
}

.cv-case-hero-banner__title-hl {
    color: var(--primary-color);
}

/* --- Optional description paragraph (used on pages that reuse this hero
   with a supporting line below the title, e.g. single-industries.php) --- */

.cv-case-hero-banner__desc {
    font-size: var(--font-size-18);
    font-family: var(--font-regular);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
    max-width: 700px;
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

.cv-case-hero-banner__desc p:not(:last-child) {
    margin-bottom: var(--spacing-sm);
}

/* List items get the same check-icon bullet used in .cv-content-area */

.cv-case-hero-banner__desc ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

.cv-case-hero-banner__desc ul li {
    position: relative;
    padding-left: 32px;
    margin-bottom: var(--spacing-xs);
}

.cv-case-hero-banner__desc ul li::before {
    content: "";
    background-image: url('../cv-images/png/check-icon.png');
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 3px;
    left: 0;
}

/* --- Entrance animation (badge / title / desc) --- */

.cv-case-hero-anim {
    position: relative;
    opacity: 0;
    animation: cv-case-hero-fade-up 0.7s ease-out forwards;
    margin-bottom: 20px !important;
}

.cv-case-hero-anim--1 { animation-delay: 0.05s; }
.cv-case-hero-anim--2 { animation-delay: 0.2s; }
.cv-case-hero-anim--3 { animation-delay: 0.35s; }

@keyframes cv-case-hero-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Badge pulsing dot --- */

.cv-case-hero-badge-dot {
    animation: cv-case-hero-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes cv-case-hero-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--bg-overlay-green); }
    50%      { box-shadow: 0 0 0 6px rgba(124, 187, 0, 0); }
}

@media (max-width: 1199px) {
    .cv-case-hero-banner__title,
    .cv-case-hero-banner__desc {
        max-width: 600px;
    }
}

@media (max-width: 991px) {
    .cv-case-hero-banner {
        padding: 130px 0 60px;
    }
    .cv-case-hero-banner__overlay {
        background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.9) 55%,
            rgba(255, 255, 255, 0.5) 75%,
            rgba(255, 255, 255, 0.15) 100%
        );
    }
}

@media (max-width: 767px) {
    .cv-case-hero-banner {
        padding: 120px 0 50px;
    }
    .cv-case-hero-banner__title,
    .cv-case-hero-banner__desc {
        max-width: 100%;
    }
    .cv-case-hero-banner__title {
        font-size: var(--font-size-30);
        line-height: 42px;
    }
    .cv-case-hero-banner__desc {
        font-size: var(--font-size-16);
    }
    /* Not enough width on mobile for the image to "peek through" —
       fall back to a near-solid white wash so the title stays readable. */
    .cv-case-hero-banner__overlay {
        background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.9) 80%,
            rgba(255, 255, 255, 0.75) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-case-hero-anim,
    .cv-case-hero-badge-dot {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ===== END CASE STUDY SINGLE HERO ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — OVERVIEW
   Plain Bootstrap grid, 50/50 — no card/box around the image or text.
============================================================ */

.cv-content-area--plain {
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

.cv-case-img {
    border-radius: var(--radius-logo);
    border: 1px solid var(--color-border-card);
    box-shadow: var(--shadow-lg);
}

/* ===== END CASE STUDY SINGLE OVERVIEW ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — CHALLENGES
   Same recipe as the Solutions page's .cv-card-box grid ("What Makes
   Our Solutions Different"), kept under its own classes since the
   icon is fixed to a star and the type scale is tuned for longer,
   dynamic challenge text. 3-col desktop / 1-col mobile.
============================================================ */

.cv-challenge-intro {
    margin-bottom: var(--spacing-xl);
}

.cv-challenge-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xl) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
    row-gap: var(--spacing-lg);
}

.cv-challenge-list__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cv-challenge-list__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-top: 2px;
}

.cv-challenge-list__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cv-challenge-list__title {
    display: block;
    font-size: var(--font-size-16);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    line-height: 1.4;
}

.cv-challenge-list__desc {
    font-size: var(--font-size-14);
    font-family: var(--font-medium);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .cv-challenge-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .cv-challenge-intro {
        margin-bottom: var(--spacing-lg);
    }
}

/* ===== END CASE STUDY SINGLE CHALLENGES ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — SOLUTION
   Plain section (.common-padding.bg-card, same pattern used
   sitewide) — no card shell, no animation. The description sits
   in a simple bordered note box.
============================================================ */

.cs-solution-card__images {
    margin-bottom: var(--spacing-lg);
}

.cs-solution-card__img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    display: block;
}

.cs-solution-note {
    background-color: var(--color-white);
    border: 1.5px solid var(--primary-color-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
}

.cs-solution-note .cv-challenge-list {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .cs-solution-note {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* ===== END CASE STUDY SINGLE SOLUTION ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — DETAIL BLOCKS
   (Feature / Result / Extra)
============================================================ */

.cv-case-detail__img {
    width: 100%;
    height: 320px;
    border-radius: var(--radius-logo);
    border: 1px solid var(--color-border-card);
    object-fit: cover;
    display: block;
}

.cv-case-detail__desc-wrap {
    margin-top: 0;
}

@media (max-width: 991px) {
    .cv-case-detail__img {
        height: 260px;
    }
}

@media (max-width: 767px) {
    .cv-case-detail__img {
        height: 220px;
    }
}

/* ===== END CASE STUDY SINGLE DETAIL BLOCKS ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — QUOTE HIGHLIGHT
   Oversized decorative quotation mark + soft gradient wash +
   a gentle pulsing glow blob (ambient, not a moving border — kept
   deliberately calm after earlier feedback that a rotating border
   felt like too much). Fades up once when scrolled into view
   (see custom-global.js), lifts slightly on hover.
============================================================ */

.cs-quote-card {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--spacing-2xl);
    background: linear-gradient(135deg, var(--primary-color-bg) 0%, var(--color-white) 65%);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-align: center;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out, box-shadow var(--transition-base);
}

.cs-quote-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cs-quote-card.is-visible:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Oversized decorative quotation mark */
.cs-quote-card::before {
    content: '\201C';
    position: absolute;
    top: -0.15em;
    left: var(--spacing-lg);
    font-size: 140px;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.14;
    pointer-events: none;
}

/* Soft ambient glow blob — gently pulses, never moves/rotates */
.cs-quote-card__glow {
    position: absolute;
    top: -70px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: var(--radius-full);
    background: var(--bg-radial-primary);
    filter: blur(12px);
    animation: cs-quote-pulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cs-quote-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.9; transform: scale(1.12); }
}

.cs-quote-card__text {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    font-size: var(--font-size-28);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    line-height: var(--line-height-relaxed);
}

.cs-quote-card__text p {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .cs-quote-card {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
    .cs-quote-card__text {
        font-size: var(--font-size-22);
    }
    .cs-quote-card::before {
        font-size: 100px;
    }
}

@media (max-width: 575px) {
    .cs-quote-card__text {
        font-size: var(--font-size-18);
    }
    .cs-quote-card::before {
        font-size: 80px;
    }
    .cs-quote-card__glow {
        width: 160px;
        height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-quote-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cs-quote-card__glow {
        animation: none;
    }
}

/* ===== END CASE STUDY SINGLE QUOTE HIGHLIGHT ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — KEY FEATURE CARDS
============================================================ */

.cv-case-feature-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-p);
    box-shadow: var(--shadow-xs);
    height: 100%;
}

.cv-case-feature-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background-color: var(--primary-color-bg);
    color: var(--primary-color);
    font-size: var(--font-size-18);
    margin-bottom: var(--spacing-15);
}

.cv-case-feature-card__title {
    font-size: var(--font-size-20);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.cv-case-feature-card__desc {
    font-size: var(--font-size-16);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* Image variant — used when ACF provides an image icon instead of FA icon */
.cv-case-feature-card__icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* ===== END CASE STUDY SINGLE KEY FEATURE CARDS ===== */

/* ============================================================
   ===== CASE STUDY SINGLE — FAQ CATEGORY GROUPING
============================================================ */

.faq-accordion__category-title {
    font-size: var(--font-size-20);
    font-family: var(--font-bold);
    color: var(--primary-color);
    margin: var(--spacing-xl) 0 var(--spacing-md);
}

.faq-accordion__category-title:first-child {
    margin-top: 0;
}

/* Reset the blog single's own margin when .cv-single-faq is reused
   as a standalone section (case study page) that already has its own padding */
.common-padding .cv-single-faq {
    margin-top: 0;
    margin-bottom: 0;
}

.cv-single-faq .accordion-item {
    background-color: var(--color-white);
}

/* ===== END CASE STUDY SINGLE FAQ CATEGORY GROUPING ===== */

/* ===== END ENGAGEMENT MODEL CARD SECTIONS ===== */


/* =========================================================
   Leadership Team Section Start
========================================================= */

.cv-team-section {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
}

/* ---------- Cards ---------- */

.cv-team-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  height: 100%;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

/* Signature detail: a slim accent bar that reveals on hover */
.cv-team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-in-out;
}

.cv-team-card:hover,
.cv-team-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border);
}

.cv-team-card:hover::before,
.cv-team-card:focus-within::before {
  transform: scaleX(1);
}

.cv-team-card:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.cv-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Avatar — compact circular photo, no color block, no icon overlay */
.cv-avatar-circle {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: visible;
}

.cv-avatar-circle img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border);
}

.cv-role-pill {
  position: absolute;
  bottom: -4px;
  right: -8px;
  background: var(--primary-color);
  color: var(--color-white);
  font-family: var(--font-semibold);
  font-size: var(--font-size-11);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid var(--color-white);
  white-space: nowrap;
}

.cv-card-heading {
  min-width: 0;
}

.cv-member-name {
  font-family: var(--font-bold);
  color: var(--color-heading);
  font-size: var(--font-size-20);
  margin-bottom: 2px;
}

.cv-member-title {
  font-family: var(--font-semibold);
  color: var(--primary-color);
  font-size: var(--font-size-14);
}

.cv-member-desc {
  font-family: var(--font-regular);
  color: var(--color-body-text);
  font-size: var(--font-size-14);
  line-height: 1.55;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cv-view-profile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0 0 4px 0;
  font-family: var(--font-bold);
  color: var(--color-heading);
  font-size: var(--font-size-14);
}

.cv-view-profile::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--primary-color);
  transition: width 0.3s ease-in-out;
}

.cv-view-profile:hover,
.cv-view-profile:focus-visible {
  color: var(--primary-color);
}

.cv-view-profile:hover::after,
.cv-view-profile:focus-visible::after {
  width: 100%;
}

.cv-view-profile i {
  font-size: var(--font-size-11);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.cv-view-profile:hover i,
.cv-view-profile:focus-visible i {
  transform: translateX(5px);
  color: var(--primary-color);
}

/* ---------- Modal ---------- */

.cv-team-modal .modal-content {
  position: relative;
  border: none;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.cv-team-modal .modal-dialog {
  max-width: 920px;
}

/* Visible close button */
.cv-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--color-heading);
  font-size: var(--font-size-16);
  line-height: 1;
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.cv-modal-close:hover {
  background: var(--color-input-bg);
  color: var(--primary-color);
}

/* Left profile panel */
.cv-modal-profile {
  background: var(--primary-color-bg);
  padding: 2.5rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cv-modal-avatar-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 1.25rem;
}

.cv-modal-avatar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-lg);
}

.cv-modal-role-pill {
  position: absolute;
  bottom: 4px;
  right: 0;
  background: var(--primary-color);
  color: var(--color-white);
  font-family: var(--font-semibold);
  font-size: var(--font-size-11);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  border: 2px solid var(--color-white);
  white-space: nowrap;
}

.cv-modal-name {
  font-family: var(--font-extrabold);
  color: var(--color-heading);
  font-size: var(--font-size-24);
  margin-bottom: 2px;
}

.cv-modal-title {
  font-family: var(--font-semibold);
  color: var(--primary-color);
  font-size: var(--font-size-16);
  margin-bottom: 0.25rem;
}

.cv-modal-tagline {
  font-family: var(--font-regular);
  color: var(--color-body-text);
  font-size: var(--font-size-14);
  margin-bottom: 1.5rem;
}

.cv-modal-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.cv-modal-actions-row.cv-actions-single {
  grid-template-columns: 1fr;
  justify-items: center;
}

.cv-btn-linkedin,
.cv-btn-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  font-family: var(--font-semibold);
  font-size: var(--font-size-14);
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
}

.cv-btn-linkedin {
  background: #0077B5;
  color: var(--color-white);
}

.cv-btn-email {
  background: var(--color-white);
  color: var(--color-heading);
  border: 1px solid var(--color-border);
}

.cv-btn-linkedin:hover {
  filter: brightness(0.9);
  color: var(--color-white);
}

.cv-btn-email:hover {
  background: var(--color-input-bg);
  border-color: var(--primary-color);
}

.cv-modal-section-label {
  display: block;
  width: 100%;
  position: relative;
  font-family: var(--font-bold);
  color: var(--color-heading);
  font-size: var(--font-size-12);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
  text-align: left;
}

.cv-modal-section-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary-color);
}

.cv-expertise-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
}

.cv-expertise-tag {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--primary-color);
  font-family: var(--font-semibold);
  font-size: var(--font-size-12);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Right details panel */
.cv-modal-details {
  padding: 3rem 2rem;
  max-height: 80vh;
  overflow-y: auto;
}

.cv-modal-about {
  font-family: var(--font-regular);
  color: var(--color-body-text);
  font-size: var(--font-size-16);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.cv-modal-about:last-of-type {
  margin-bottom: 2rem;
}

/* Accordion ("In their words") — built on Bootstrap's .accordion
   component; these rules only restyle it to match the theme. */
.cv-accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-focus-box-shadow: none;
}

.cv-accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-divider);
}

.cv-accordion-item:last-child {
  border-bottom: none;
}

.cv-accordion-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  padding: 1rem 0;
  font-family: var(--font-semibold);
  color: var(--color-heading);
  font-size: var(--font-size-16);
  box-shadow: none;
}

.cv-accordion-button:not(.collapsed) {
  background: none;
  color: var(--primary-color);
  box-shadow: none;
}

.cv-faq-q-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  color: var(--primary-color);
  border-radius: 999px;
  font-size: var(--font-size-12);
  font-family: var(--font-semibold);
}

/* Replace Bootstrap's built-in chevron background-image with a
   plain rotating caret so it follows the theme colors */
.cv-accordion-button::after {
  background-image: none !important;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078"; /* chevron-down */
  color: var(--color-muted);
  font-size: var(--font-size-14);
  transition: transform 0.15s ease-in-out, color 0.15s ease-in-out;
}

.cv-accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.cv-accordion-body {
  color: var(--color-body-text);
  font-family: var(--font-regular);
  font-size: var(--font-size-14);
  line-height: 1.6;
  padding: 0 0 1rem 2rem;
}

@media (max-width: 767.98px) {
  .cv-modal-details { max-height: none; padding: 2rem 1.5rem; }
  .cv-modal-profile { padding: 2.5rem 1.5rem 2rem; }
}

/* ============================================================
   ===== HIRE DEVELOPER BANNER SECTION (hdb)
============================================================ */

/* ── Section Wrapper ── */
.hdb-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

/* decorative glow accent — top right */
.hdb-section::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -100px;
    width: 560px;
    height: 560px;
    background: radial-gradient(ellipse at center, rgba(0, 161, 241, 0.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hdb-section .container {
    position: relative;
    z-index: 1;
}

/* ── Badge: font-size override (global .hero-section__subtitle is 13px) ── */
.hdb-section .hero-section__subtitle {
    font-size: var(--font-size-16);
    margin-bottom: var(--spacing-20);
}

/* ── Title Row ── */
.hdb-title-row {
    margin-bottom: var(--spacing-20);
}

/* ── Technology Icon (inline before title text) ── */
.hdb-tech-icon {
    display: inline-block;
    vertical-align: middle;
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-right: 4px;
    margin-bottom: 6px;
}

/* ── Benefits: spacing override (inherits cv-case-hero-banner__desc list styling) ── */
.hdb-benefits {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.hdb-benefits ul li {
    font-size: var(--font-size-17);
    margin-bottom: var(--spacing-sm);
}

/* ── Form Card ── */
.hdb-form-card {
    background: #F1F5F966;
    border-radius: var(--radius-2xl);
    padding: 20px;
    border: 1px solid var(--color-white);
    box-shadow: var(--shadow-card);
}

/* ── Form Header ── */
.hdb-form-header {
    margin-bottom: var(--spacing-xl);
}

.hdb-form-title {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-24);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: 26px;
}

/* ── CF7 Form Field Overrides (scoped to .hdb-form-body) ── */
.hdb-form-body .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.hdb-form-body .wpcf7-form p {
    margin: 0;
}

/* Override CF7 default inline-block so inputs stretch full width */
.hdb-form-body .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    position: relative;
}

.hdb-form-body .wpcf7-form input[type="text"],
.hdb-form-body .wpcf7-form input[type="email"],
.hdb-form-body .wpcf7-form input[type="tel"],
.hdb-form-body .wpcf7-form input[type="number"],
.hdb-form-body .wpcf7-form select,
.hdb-form-body .wpcf7-form textarea {
    width: 100%;
    background: #F0F7FE;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-lg);
    padding: 13px var(--spacing-md);
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-heading);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    margin-bottom: 10px;
}

.hdb-form-body .wpcf7-form input[type="text"]:focus,
.hdb-form-body .wpcf7-form input[type="email"]:focus,
.hdb-form-body .wpcf7-form input[type="tel"]:focus,
.hdb-form-body .wpcf7-form input[type="number"]:focus,
.hdb-form-body .wpcf7-form select:focus,
.hdb-form-body .wpcf7-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 161, 241, 0.12);
    background: var(--bg-white);
}

.hdb-form-body .wpcf7-form input::placeholder,
.hdb-form-body .wpcf7-form textarea::placeholder {
    color: var(--color-subtle);
}

/* Validation: red border on invalid fields */
.hdb-form-body .wpcf7-not-valid,
.hdb-form-body .wpcf7-form input[aria-invalid="true"],
.hdb-form-body .wpcf7-form select[aria-invalid="true"],
.hdb-form-body .wpcf7-form textarea[aria-invalid="true"] {
    border-color: var(--secondary-red) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.hdb-form-body .wpcf7-not-valid-tip {
    display: block;
    color: var(--secondary-red);
    font-size: var(--font-size-16);
    margin-top: 4px;
}

.hdb-form-body .wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: var(--spacing-40);
    cursor: pointer;
}

.hdb-form-body .wpcf7-form textarea {
    min-height: 96px;
    resize: vertical;
}

.hdb-form-body .wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 160px;
    padding: 14px 32px;
    background-color: var(--primary-color);
    color: var(--color-white);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-full);
    font-family: var(--font-semibold);
    font-size: var(--font-size-17);
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    margin-top: var(--spacing-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

/* Submit paragraph — flex column so spinner doesn't push button off-center */
.hdb-form-body .wpcf7-form p:has(input[type="submit"]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}

/* Spinner: detach from flow so it doesn't offset the button */
.hdb-form-body .wpcf7-spinner {
    display: block;
    margin-top: var(--spacing-sm);
}

.hdb-form-body .wpcf7-form input[type="submit"]:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary);
}

/* ── Responsive: 1199px ── */
@media (max-width: 1199px) {
    .hdb-section { padding: 130px 0; }
    .hdb-form-card { padding: var(--spacing-xl); }
}

/* ── Responsive: 991px ── */
@media (max-width: 991px) {
    .hdb-section .cv-case-hero-banner__title { max-width: 100%; }
    .hdb-section .cv-case-hero-banner__desc  { max-width: 100%; }
}

/* ── Responsive: 767px ── */
@media (max-width: 767px) {
    .hdb-tech-icon { width: 34px; height: 34px; }
}

/* ── Responsive: 575px ── */
@media (max-width: 575px) {
    .hdb-tech-icon { width: 28px; height: 28px; }
    .hdb-form-card { padding: var(--spacing-20); }
}

/* ===== END HIRE DEVELOPER BANNER SECTION (hdb) ===== */

/* ============================================================
   ===== ENGAGEMENT MODELS SECTION (eng)
============================================================ */

/* ── Section Description ── */
.eng-section__desc {
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    line-height: var(--line-height-normal);
}

/* ── Card ── */
.eng-card {
    padding: 20px;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.eng-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ── Icon ── */
.eng-card__icon-wrap {
    width: 56px;
    height: 56px;
    background: var(--bg-white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
}

.eng-card__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ── Title ── */
.eng-card__title {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-24);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

/* ── Short Description ── */
.eng-card__desc {
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
}

/* ── Rich Content ── */
.eng-card__content {
    flex: 1;
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.eng-card__content h3 {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-24);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: 8px;
    text-align: left;
}

.eng-card__content p {
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-sm);
}

.eng-card__content strong {
    font-family: var(--font-semibold);
    font-size: var(--font-size-16);
    color: var(--color-heading);
    display: block;
    margin-top: var(--spacing-md);
    margin-bottom: 6px;
}

.eng-card__content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
}

.eng-card__content ul li {
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    padding-left: 24px;
    position: relative;
    margin-bottom: 6px;
    line-height: var(--line-height-normal);
}

.eng-card__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background: url('../cv-images/png/check-icon.png') center / contain no-repeat;
}

/* ── CTA Link ── */
.eng-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-semibold);
    font-size: var(--font-size-16);
    color: var(--primary-color);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.eng-card__cta:hover {
    color: var(--primary-color-dark);
    gap: 10px;
}

.eng-card__cta-arrow {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.eng-card__cta:hover .eng-card__cta-arrow {
    transform: translateX(4px);
}

/* ── Responsive: 991px ── */
@media (max-width: 991px) {
    .eng-card { border-radius: 24px; }
    .eng-card__title { font-size: var(--font-size-20); }
}

/* ── Responsive: 767px ── */
@media (max-width: 767px) {
    .eng-card { padding: 24px; }
}

/* ── Responsive: 575px ── */
@media (max-width: 575px) {
    .eng-card { padding: 20px; border-radius: 20px; }
}

/* ===== END ENGAGEMENT MODELS SECTION (eng) ===== */

/* ============================================================
   ===== LIFE AT CODEVISION — GALLERY (lac)
============================================================ */

.lac-gallery-item--hidden { display: none; }

/* ===== END LIFE AT CODEVISION GALLERY (lac) ===== */

/* ============================================================
   ===== CAREER JOBS TAB SECTION (cjt)
============================================================ */
/* ── Eyebrow Label ── */
.cjt-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--primary-color-xlight);
    color: var(--primary-color-dark);
    border-radius: var(--radius-full);
    font-family: var(--font-semibold);
    font-size: var(--font-size-13);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

/* ── Tab Navigation Wrap ── */
.cjt-nav-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: var(--spacing-40);
}
.cjt-nav-wrap::-webkit-scrollbar { display: none; }

.cjt-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-12);
    min-width: max-content;
    margin: 0 auto;
    padding: var(--spacing-xs) var(--spacing-md);
}

/* ── Individual Pill ── */
.cjt-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-12) var(--spacing-20);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    background: var(--bg-white);
    color: var(--color-heading);
    font-family: var(--font-medium);
    font-size: var(--font-size-15);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
    outline: none;
    line-height: 1;
}

.cjt-nav__pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.cjt-nav__pill.is-active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%);
    border-color: transparent;
    color: var(--color-white);
    box-shadow:var(--shadow-card-bottom);
    transform: translateY(-2px);
}

.cjt-nav__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Panels Wrapper ── */
.cjt-panels-wrap { position: relative; }

/* ── Single Panel ── */
.cjt-panel {
    display: none;
    background: var(--bg-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    animation: cjtFadeSlide 0.35s ease both;
}

.cjt-panel.is-active { display: block; }

@keyframes cjtFadeSlide {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Left Content ── */
.cjt-panel__content {
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    height: 100%;
}

/* ── Urgent Badge ── */
.cjt-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-12);
    border-radius: var(--radius-full);
    font-family: var(--font-semibold);
    font-size: var(--font-size-12);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    width: fit-content;
}

.cjt-badge--urgent {
    background: rgba(246, 83, 20, 0.10);
    color: var(--secondary-red);
    border: 1px solid rgba(246, 83, 20, 0.20);
}

.cjt-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--secondary-red);
    animation: cjtPulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes cjtPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ── Icon + Title ── */
.cjt-panel__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.cjt-panel__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: var(--primary-color-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--spacing-12);
}

.cjt-panel__icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.cjt-panel__title {
    font-family: var(--font-bold);
    font-size: var(--font-size-28);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
    margin: 0;
}

/* ── Meta Cards ── */
.cjt-meta-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.cjt-meta-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md) var(--spacing-20);
    background: var(--bg-section);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    flex: 1;
    min-width: 130px;
}

.cjt-meta-card__label {
    font-family: var(--font-regular);
    font-size: var(--font-size-12);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.cjt-meta-card__value {
    font-family: var(--font-semibold);
    font-size: var(--font-size-18);
    color: var(--primary-color);
}

/* ── Body (ACF rich text) ── */
.cjt-panel__body {
    color: var(--color-body-text);
    font-family: var(--font-regular);
    font-size: var(--font-size-15);
    line-height: var(--line-height-relaxed);
}

.cjt-panel__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

.cjt-panel__body ul li {
    position: relative;
    padding-left: 28px;
    color: var(--color-body-text);
    font-size: var(--font-size-15);
    line-height: var(--line-height-relaxed);
}

.cjt-panel__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background: url('../cv-images/png/check-icon.png') center / contain no-repeat;
}

/* ── Right Visual ── */
.cjt-panel__visual {
    position: relative;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color-xlight) 0%, var(--bg-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
    padding: var(--spacing-3xl) var(--spacing-2xl);
}

.cjt-panel__visual-inner {
    position: relative;
    width: 100%;
    max-width: 440px;
}

.cjt-panel__img {
    width: 100%;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* ── Floating Cards ── */
.cjt-float-card {
    position: absolute;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-12) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-semibold);
    font-size: var(--font-size-13);
    color: var(--color-heading);
    white-space: nowrap;
}

.cjt-float-card--tl {
    top: -18px;
    right: -18px;
    animation: cjtFloatA 3.2s ease-in-out infinite;
}

.cjt-float-card--br {
    bottom: -18px;
    left: -18px;
    animation: cjtFloatB 3.2s ease-in-out infinite;
}

@keyframes cjtFloatA {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
@keyframes cjtFloatB {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(7px); }
}

.cjt-float-card__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--primary-color);
    flex-shrink: 0;
}

.cjt-float-card__dot--green {
    background: var(--secondary-green);
}

/* ── Responsive: 1440px ── */
@media (max-width: 1440px) {
    .cjt-panel__content { padding: var(--spacing-2xl); }
}

/* ── Responsive: 1199px ── */
@media (max-width: 1199px) {
    .cjt-panel__title { font-size: var(--font-size-24); }
    .cjt-panel__visual { min-height: 380px; padding: var(--spacing-2xl); }
}

/* ── Responsive: 991px ── */
@media (max-width: 991px) {
    .cjt-nav { justify-content: flex-start; }
    .cjt-panel__visual { min-height: 320px; border-radius: 0 0 var(--radius-card) var(--radius-card); }
    .cjt-float-card--tl { top: -12px; right: -12px; }
    .cjt-float-card--br { bottom: -12px; left: -12px; }
}

/* ── Responsive: 767px ── */
@media (max-width: 767px) {
    .cjt-nav-wrap {
        overflow-x: visible;
    }
    .cjt-nav {
        flex-wrap: wrap;
        justify-content: center;
        min-width: unset;
    }
    .cjt-panel__content { padding: var(--spacing-xl); gap: var(--spacing-lg); }
    .cjt-panel__title { font-size: var(--font-size-22); }
    .cjt-panel__visual { min-height: 280px; padding: var(--spacing-xl); }
}

/* ── Responsive: 575px ── */
@media (max-width: 575px) {
    .cjt-nav { gap: var(--spacing-sm); }
    .cjt-nav__pill { font-size: var(--font-size-13); padding: var(--spacing-10) var(--spacing-md); }
    .cjt-panel__content { padding: var(--spacing-lg); gap: var(--spacing-md); }
    .cjt-panel__title { font-size: var(--font-size-20); }
    .cjt-meta-card { min-width: unset; }
    .cjt-float-card { display: none; }
}

/* ===== END CAREER JOBS TAB SECTION (cjt) ===== */

/* ============================================================
   ===== OUR INFRASTRUCTURE — SECURITY & CONNECTIVITY (oi)
============================================================ */

.oi-sc-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-card);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);
}

.oi-sc-card:hover {
    box-shadow: var(--shadow-xl);
}

.oi-sc-card__img-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.oi-sc-card__img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, transparent, var(--color-white));
    pointer-events: none;
    z-index: 1;
}

.oi-sc-card__img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.oi-sc-card:hover .oi-sc-card__img {
    transform: scale(1.06);
}

.oi-sc-card__body {
    padding: var(--spacing-card-p);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.oi-sc-card__title {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-22);
    color: var(--primary-color);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-md);
}

.oi-sc-card__desc {
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
}

.oi-sc-card__desc p { margin-bottom: var(--spacing-sm); }
.oi-sc-card__desc p:last-child { margin-bottom: 0; }

.oi-sc-card__desc ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0;
}

.oi-sc-card__desc ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
}

.oi-sc-card__desc ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background: url('../cv-images/png/check-icon.png') center / contain no-repeat;
}

@media (max-width: 767px) {
    .oi-sc-card__body  { padding: var(--spacing-xl); }
    .oi-sc-card__title { font-size: var(--font-size-20); }
}

@media (max-width: 575px) {
    .oi-sc-card__body { padding: var(--spacing-lg); }
}

/* ===== END OUR INFRASTRUCTURE SECURITY & CONNECTIVITY (oi) ===== */

/* ============================================================
   ===== OUR PORTFOLIO — CARD SECTION (op)
============================================================ */
.hero-sect-padd {
    padding: 100px 0px 40px;
}
.op-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-card);
    box-shadow: var(--shadow-card);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.op-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

/* ── Image Wrap ── */
.op-card__img-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.op-card__img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.op-card:hover .op-card__img {
    transform: scale(1.05);
}

/* ── Tech Badge ── */
.op-card__tech-badge {
    position: absolute;
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    padding: 5px 14px 5px 6px;
    font-family: var(--font-semibold);
    font-size: var(--font-size-13);
    color: var(--color-heading);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: box-shadow var(--transition-fast);
}

.op-card__tech-badge:hover {
    box-shadow: var(--shadow-lg);
}

.op-card__tech-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: var(--radius-full);
}

/* ── Card Body ── */
.op-card__body {
    padding: var(--spacing-card-p);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.op-card__title {
    font-family: var(--font-bold);
    font-size: var(--font-size-20);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
}

.op-card__title-link {
    color: inherit;
    transition: color var(--transition-base);
}

.op-card:hover .op-card__title-link {
    color: var(--primary-color);
}

.op-card__desc {
    font-family: var(--font-regular);
    font-size: var(--font-size-15);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    flex: 1;
    margin-bottom: var(--spacing-lg);
}

/* ── Card Footer ── */
.op-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.op-card__detail-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-semibold);
    font-size: var(--font-size-14);
    color: var(--primary-color);
    transition: gap var(--transition-fast);
}

.op-card__detail-link svg {
    transition: transform var(--transition-fast);
}

.op-card__detail-link:hover svg {
    transform: translateX(3px);
}

.op-card__website-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-semibold);
    font-size: var(--font-size-14);
    color: var(--color-desc);
    transition: color var(--transition-base);
}

.op-card__website-link:hover {
    color: var(--primary-color);
}

.op-card__website-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .op-card__body  { padding: var(--spacing-xl); }
    .op-card__title { font-size: var(--font-size-18); }
}

@media (max-width: 575px) {
    .op-card__body { padding: var(--spacing-lg); }
}

/* ===== END OUR PORTFOLIO CARD SECTION (op) ===== */

/* ============================================================
   ===== SINGLE PORTFOLIO PAGE (sop)
============================================================ */

/* ── Hero Image ── */
.sop-hero-img-wrap {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.sop-hero-img {
    width: 100%;
    display: block;
    border-radius: var(--radius-card);
}

/* ── Portfolio Content ── */
.sop-content {
    margin-top: var(--spacing-lg);
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
}

.sop-content p { margin-bottom: var(--spacing-md); }
.sop-content p:last-child { margin-bottom: 0; }

.sop-content ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0;
}

.sop-content ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: var(--spacing-sm);
    color: var(--color-desc);
    font-size: var(--font-size-16);
    line-height: var(--line-height-relaxed);
}

.sop-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background: url('../cv-images/png/check-icon.png') center / contain no-repeat;
}

/* ── Info Cards ── */
.sop-info-card {
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 32px rgba(0, 161, 241, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: var(--spacing-card-p);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.sop-info-card:hover {
    box-shadow: 0 16px 48px rgba(0, 161, 241, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.sop-info-card__icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background-color: var(--primary-color-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sop-info-card__icon-wrap--default {
    background-color: var(--primary-color-xlight);
}

.sop-info-card__icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.sop-info-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sop-info-card__label {
    font-family: var(--font-semibold);
    font-size: var(--font-size-12);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sop-info-card__value {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-20);
    color: var(--color-heading);
    line-height: var(--line-height-snug);
    margin: 0;
}

.sop-info-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-semibold);
    font-size: var(--font-size-16);
    color: var(--primary-color);
    transition: opacity var(--transition-fast);
    word-break: break-all;
}

.sop-info-card__link:hover {
    opacity: 0.75;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sop-info-card { padding: var(--spacing-xl); }
}

@media (max-width: 767px) {
    .sop-info-card {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .sop-hero-img-wrap { border-radius: var(--radius-lg); }
}

/* ===== END SINGLE PORTFOLIO PAGE (sop) ===== */

/* ============================================================
   ===== SINGLE TECHNOLOGIES — DEVELOPMENT SERVICE SECTION (st)
============================================================ */

/* ── Outer split card ── */
.st-dev-card {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-card);
    overflow: hidden;
}

/* ── Left half: bg-card + image centered ── */
.st-dev-card__img-side {
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-40);
    min-height: 380px;
    height: 100%;
}
.st-dev-card__img {
    max-width: 320px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ── Right half: white bg + content ── */
.st-dev-card__content-side {
    background-color: var(--color-white);
    padding: var(--spacing-40);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    height: 100%;
}

/* WYSIWYG body */
.st-dev-card__body p {
    font-size: var(--font-size-16);
    line-height: 1.8;
    color: var(--color-body-text);
    font-family: var(--font-regular);
    margin-bottom: var(--spacing-md);
}
.st-dev-card__body p:last-of-type { margin-bottom: 0; }
.st-dev-card__body strong {
    font-family: var(--font-bold);
    color: var(--color-heading);
}
.st-dev-card__body h3 {
    font-size: var(--font-size-22);
    font-family: var(--font-extrabold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-tight);
}
.st-dev-card__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.st-dev-card__body ul li {
    font-size: var(--font-size-15);
    line-height: var(--line-height-relaxed);
    color: var(--color-body-text);
    font-family: var(--font-regular);
    padding-left: var(--spacing-xl);
    position: relative;
}
.st-dev-card__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    background-color: var(--primary-color-xlight);
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2300A1F1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Button */
.st-dev-card__actions { margin-top: auto; }
.st-content-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--color-white);
    font-family: var(--font-semibold);
    font-size: var(--font-size-15);
    padding: 0.75rem var(--spacing-xl);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-primary);
}
.st-content-btn:hover {
    background-color: var(--primary-color-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 161, 241, 0.35);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .st-dev-card__img-side { padding: var(--spacing-2xl); min-height: 320px; }
    .st-dev-card__content-side { padding: var(--spacing-2xl); }
}
@media (max-width: 991px) {
    .st-dev-card__img-side { min-height: 280px; }
}
@media (max-width: 767px) {
    .st-dev-card__img-side { min-height: 240px; padding: var(--spacing-xl); }
    .st-dev-card__content-side { padding: var(--spacing-xl); }
    .st-dev-card__img { max-width: 220px; }
}
@media (max-width: 575px) {
    .st-dev-card__img-side { padding: var(--spacing-lg); min-height: 200px; }
    .st-dev-card__content-side { padding: var(--spacing-lg); gap: var(--spacing-md); }
}

/* ===== END SINGLE TECHNOLOGIES DEVELOPMENT SERVICE SECTION (st) ===== */

/* ============================================================
   ===== CV GUIDE PAGE
============================================================ */

/* ── Banner heading font override ── */
.cv-guide-banner-heading {
    font-size: var(--font-size-50);
    line-height: 64px;
}
@media (max-width: 1199px) {
    .cv-guide-banner-heading { font-size: var(--font-size-44); line-height: 58px; }
}
@media (max-width: 991px) {
    .cv-guide-banner-heading { font-size: var(--font-size-38); line-height: 50px; }
}
@media (max-width: 767px) {
    .cv-guide-banner-heading { font-size: var(--font-size-32); line-height: 44px; }
}
@media (max-width: 575px) {
    .cv-guide-banner-heading { font-size: var(--font-size-28); line-height: 38px; }
}

/* ── Tabs Strip ── */
.cv-guide-tabs-strip {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 100px;
    z-index: var(--z-sticky);
}
.cv-guide-tabs-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cv-guide-tabs-list::-webkit-scrollbar {
    display: none;
}
.cv-guide-tab-item a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-medium);
    font-size: var(--font-size-15);
    color: var(--color-body-text);
    text-decoration: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cv-guide-tab-item a i {
    font-size: var(--font-size-14);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
.cv-guide-tab-item a:hover {
    color: var(--primary-color);
}
.cv-guide-tab-item a:hover i {
    opacity: 1;
}
.cv-guide-tab-item.active a {
    color: var(--primary-color);
    font-family: var(--font-semibold);
    border-bottom-color: var(--primary-color);
}
.cv-guide-tab-item.active a i {
    opacity: 1;
}

@media (max-width: 767px) {
    .cv-guide-tab-item a { font-size: var(--font-size-14); padding: var(--spacing-md) var(--spacing-md); }
}
@media (max-width: 575px) {
    .cv-guide-tab-item a { font-size: var(--font-size-13); padding: var(--spacing-sm) var(--spacing-md); }
}

/* ── Banner badge & actions (sol-banner-section handles bg/padding) ── */
.cv-guide-badge {
    display: inline-block;
    background: var(--color-white);
    color: var(--color-body-text);
    border: 1px solid var(--color-border);
    font-family: var(--font-medium);
    font-size: var(--font-size-12);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    padding: 0.4rem var(--spacing-lg);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-xs);
}
.cv-guide-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}
/* ── Main Layout ── */
.cv-guide-main {
    padding: var(--spacing-3xl) 0 var(--spacing-4xl);
}

/* ── Sidebar ── */
.cv-guide-sidebar {
    position: sticky;
    top: 180px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.cv-guide-sidebar-inner {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-card-bottom);
}
.cv-guide-sidebar-heading {
    font-family: var(--font-bold);
    font-size: var(--font-size-11);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}
.cv-guide-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cv-guide-toc-list li {
    margin-bottom: var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}
.cv-guide-toc-list li.active {
    background-color: var(--primary-color-xlight);
}
.cv-guide-toc-link {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-family: var(--font-regular);
    font-size: var(--font-size-14);
    color: var(--color-body-text);
    text-decoration: none;
    padding: 0.45rem var(--spacing-sm);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.cv-guide-toc-link::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    flex-shrink: 0;
    margin-top: 0.45em;
    transition: background-color var(--transition-fast);
}
.cv-guide-toc-list li.active .cv-guide-toc-link,
.cv-guide-toc-link:hover {
    color: var(--primary-color);
    font-family: var(--font-medium);
}
.cv-guide-toc-list li.active .cv-guide-toc-link::before,
.cv-guide-toc-link:hover::before {
    background-color: var(--primary-color);
}

/* Mobile TOC toggle */
.cv-guide-toc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: 0.85rem var(--spacing-lg);
    font-family: var(--font-semibold);
    font-size: var(--font-size-14);
    color: var(--color-heading);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}
.cv-guide-toc-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}
.cv-guide-toc-btn[aria-expanded="true"] .cv-guide-toc-chevron {
    transform: rotate(180deg);
}

/* Force sidebar visible on desktop */
@media (min-width: 992px) {
    #cvGuideToc {
        display: block !important;
    }
}

/* ── Content Card ── */
.cv-guide-content-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-3xl);
}

/* ── Content Area ── */
.cv-guide-content {
    min-height: 60vh;
}
.cv-guide-section {
    /* padding-bottom: var(--spacing-3xl); */
    margin-bottom: var(--spacing-3xl);
}
.cv-guide-section + .cv-guide-section {
    border-top: 1px dashed var(--color-subtle);
    padding-top: var(--spacing-3xl);
}
.cv-guide-section-heading {
    font-family: var(--font-extrabold);
    font-size: var(--font-size-28);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

/* ── WYSIWYG Content ── */
.cv-guide-wysiwyg {
    font-family: var(--font-regular);
    font-size: var(--font-size-16);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
    overflow-wrap: break-word;
    word-break: break-word;
}
.cv-guide-wysiwyg h2 {
    font-family: var(--font-bold);
    font-size: var(--font-size-24);
    color: var(--color-heading);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-snug);
}
.cv-guide-wysiwyg h3 {
    font-family: var(--font-semibold);
    font-size: var(--font-size-20);
    color: var(--color-heading);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-snug);
}
.cv-guide-wysiwyg h4 {
    font-family: var(--font-semibold);
    font-size: var(--font-size-18);
    color: var(--color-heading);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}
.cv-guide-wysiwyg h5,
.cv-guide-wysiwyg h6 {
    font-family: var(--font-medium);
    font-size: var(--font-size-16);
    color: var(--color-heading);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}
.cv-guide-wysiwyg p {
    margin-bottom: var(--spacing-10);
}
.cv-guide-wysiwyg a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.cv-guide-wysiwyg a:hover {
    color: var(--primary-color-dark);
}
/* Unordered lists */
.cv-guide-wysiwyg ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--spacing-md);
}
.cv-guide-wysiwyg ul > li {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}
.cv-guide-wysiwyg ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background-color: var(--primary-color);
    border-radius: var(--radius-full);
}
.cv-guide-wysiwyg ul ul > li::before {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    width: 7px;
    height: 7px;
}
.cv-guide-wysiwyg ul ul ul > li::before {
    background-color: var(--primary-color-dark);
    border: none;
    width: 5px;
    height: 5px;
}
.cv-guide-wysiwyg ul > li:has(> img)::before {
    display: none;
}
/* Nested lists — tighter indent to avoid deep stacking */
.cv-guide-wysiwyg ul ul,
.cv-guide-wysiwyg ul ol,
.cv-guide-wysiwyg ol ul,
.cv-guide-wysiwyg ol ol {
    padding-left: var(--spacing-md);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}
/* Ordered lists */
.cv-guide-wysiwyg ol {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}
.cv-guide-wysiwyg ol > li {
    margin-bottom: var(--spacing-sm);
    padding-left: 0;
}
.cv-guide-wysiwyg strong,
.cv-guide-wysiwyg b {
    font-family: var(--font-semibold);
    color: var(--color-heading);
}
.cv-guide-wysiwyg em,
.cv-guide-wysiwyg i {
    font-style: italic;
}
.cv-guide-wysiwyg blockquote {
    border-left: 4px solid var(--primary-color);
    background: var(--primary-color-xlight);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--spacing-xl) 0;
    font-style: italic;
    color: var(--primary-dark-soft);
}
.cv-guide-wysiwyg code {
    background: var(--color-bg);
    color: var(--secondary-red);
    font-size: 0.875em;
    padding: 0.15em 0.45em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.cv-guide-wysiwyg pre {
    background: var(--bg-dark);
    color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    overflow-x: auto;
    margin: var(--spacing-xl) 0;
}
.cv-guide-wysiwyg pre code {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font-size: var(--font-size-14);
}
.cv-guide-wysiwyg img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    display: block;
    margin: 20px 0;
}
/* Table wrapper for scroll */
.cv-guide-table-wrap {
    overflow-x: auto;
    margin: var(--spacing-xl) 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.cv-guide-wysiwyg table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-15);
    min-width: 480px;
}
.cv-guide-wysiwyg table th {
    background: var(--primary-color-bg);
    color: var(--color-heading);
    font-family: var(--font-semibold);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}
.cv-guide-wysiwyg table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    vertical-align: top;
    color: var(--color-body-text);
}
.cv-guide-wysiwyg table tr:nth-child(even) td {
    background: var(--bg-light);
}
.cv-guide-wysiwyg table tr:hover td {
    background: var(--primary-color-xlight);
    transition: background-color var(--transition-fast);
}
.cv-guide-wysiwyg hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-2xl) 0;
}

/* ── Info Card ── */
.cv-guide-info-card {
    background: var(--primary-color-bg);
    border: 1px solid rgba(0, 161, 241, 0.2);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-2xl);
    margin-top: var(--spacing-lg);
    font-family: var(--font-regular);
    font-size: var(--font-size-15);
    color: var(--color-body-text);
    line-height: var(--line-height-relaxed);
}
.cv-guide-info-card h2,
.cv-guide-info-card h3,
.cv-guide-info-card h4 {
    font-family: var(--font-semibold);
    font-size: var(--font-size-17);
    color: var(--primary-color-dark);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}
.cv-guide-info-card p:last-child { margin-bottom: 0; }
.cv-guide-info-card ul {
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}
.cv-guide-info-card ul li { margin-bottom: var(--spacing-xs); }

/* ── Special info boxes ── */
.cv-guide-wysiwyg .note,
.cv-guide-wysiwyg .wp-block-info {
    background: var(--bg-overlay);
    border-left: 4px solid var(--primary-color);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--spacing-xl) 0;
}
.cv-guide-wysiwyg .tip {
    background: var(--bg-overlay-green);
    border-left: 4px solid var(--secondary-green);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--spacing-xl) 0;
}
.cv-guide-wysiwyg .important,
.cv-guide-wysiwyg .warning {
    background: var(--bg-overlay-yellow);
    border-left: 4px solid var(--secondary-yellow);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--spacing-xl) 0;
}
.cv-guide-wysiwyg .danger,
.cv-guide-wysiwyg .critical {
    background: var(--bg-overlay-red);
    border-left: 4px solid var(--secondary-red);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--spacing-xl) 0;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .cv-guide-sidebar { top: 160px; }
    .cv-guide-content-card { padding: var(--spacing-2xl); }
}
@media (max-width: 991px) {
    .cv-guide-main { padding: var(--spacing-2xl) 0 var(--spacing-3xl); }
    .cv-guide-sidebar { position: static; max-height: none; overflow-y: visible; }
    .cv-guide-content-card { padding: var(--spacing-xl) var(--spacing-2xl); }
}
@media (max-width: 767px) {
    .cv-guide-content-card { padding: var(--spacing-xl); border-radius: var(--radius-xl); }
    .cv-guide-section-heading { font-size: var(--font-size-24); }
    .cv-guide-wysiwyg h2 { font-size: var(--font-size-22); }
    .cv-guide-wysiwyg h3 { font-size: var(--font-size-18); }
    .cv-guide-info-card { padding: var(--spacing-lg); }
}
@media (max-width: 575px) {
    .cv-guide-main { padding: var(--spacing-xl) 0 var(--spacing-2xl); }
    .cv-guide-content-card { padding: var(--spacing-lg); border-radius: var(--radius-lg); }
    .cv-guide-section-heading { font-size: var(--font-size-22); }
    .cv-guide-section { padding-bottom: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
}

/* ===== END CV GUIDE PAGE ===== */

/* ============================================================
   ===== SCROLL TO TOP BUTTON
============================================================ */
.cv-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cv-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cv-scroll-top:hover {
    background: var(--primary-dark, var(--primary-color));
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.cv-scroll-top__icon {
    width: 20px;
    height: 20px;
    color: #fff;
    transition: transform 0.25s ease;
}

.cv-scroll-top:hover .cv-scroll-top__icon {
    transform: translateY(-2px);
}

.cv-scroll-top::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    border: 2px solid var(--primary-color);
    opacity: 0;
    animation: cv-scroll-pulse 2.8s ease-out infinite;
}

@keyframes cv-scroll-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(1.8); opacity: 0; }
}

@media (max-width: 576px) {
    .cv-scroll-top {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
    }
    .cv-scroll-top__icon {
        width: 18px;
        height: 18px;
    }
}
/* ===== END SCROLL TO TOP BUTTON ===== */

/* ============================================================
   ===== 404 — PAGE NOT FOUND
   Hero-style full page: reuses the homepage's badge pill
   (.hero-section__subtitle), heading (.hero-section__heading),
   description and CTA buttons (.hero-banner-primary / -secondary)
   for a consistent, on-brand look. Only new here: the section
   shell, glow blobs, oversized gradient numeral, and a pure-CSS
   fade-up entrance (no JS — always above the fold, so it must
   never depend on a scroll trigger to become visible).
============================================================ */

.cv-404-section {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-4xl) 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle, var(--bg-overlay) 0%, rgba(0, 161, 241, 0) 100%);
    background-color: var(--bg-hero);
}

.cv-404-section .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.cv-404-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cv-404-content .hero-section__subtitle {
    margin-bottom: var(--spacing-lg);
}

.cv-404-content .hero-section__desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Glow blobs (same soft blurred-blob texture as the home hero) --- */

.cv-404-section__glow {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.cv-404-section__glow--a {
    width: 400px;
    height: 400px;
    top: -160px;
    right: 6%;
    background-color: var(--bg-overlay-medium);
}

.cv-404-section__glow--b {
    width: 340px;
    height: 340px;
    bottom: -140px;
    left: 4%;
    background-color: var(--bg-overlay-green);
}

/* --- Oversized gradient numeral --- */

.cv-404-number {
    font-size: clamp(96px, 16vw, 200px);
    font-family: var(--font-extrabold);
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 60%, var(--primary-dark) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: var(--spacing-sm);
    animation: cv-404-float 4s ease-in-out infinite;
}

@keyframes cv-404-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.cv-404-number-heading {
    margin-bottom: var(--spacing-md);
}

.cv-404-number-desc {
    margin-bottom: var(--spacing-xl);
}

/* --- Fade-up entrance (pure CSS, plays on load — no scroll trigger) --- */

.cv-404-anim {
    opacity: 0;
    animation: cv-404-fade-up 0.7s ease-out forwards;
}

.cv-404-anim--1 { animation-delay: 0.05s; }
.cv-404-anim--2 { animation-delay: 0.15s; }
.cv-404-anim--3 { animation-delay: 0.3s; }
.cv-404-anim--4 { animation-delay: 0.45s; }
.cv-404-anim--5 { animation-delay: 0.6s; }

@keyframes cv-404-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
    .cv-404-section {
        padding: var(--spacing-2xl) 0;
        min-height: 60vh;
    }
    .cv-404-content .hero-section__subtitle {
        margin-bottom: var(--spacing-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-404-anim {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .cv-404-number {
        animation: none;
    }
}

/* ============================================================
   ===== CS RESULT SECTION
============================================================ */

/* ── Image frames ── */
.cs-result-images {
    margin-bottom: var(--spacing-xl);
}

.cs-result-img-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light-blue);
    box-shadow: var(--shadow-lg);
    background: var(--color-white);
}

.cs-result-img-frame__img {
    width: 100%;
    display: block;
    transition: transform var(--transition-slow);
}

.cs-result-img-frame:hover .cs-result-img-frame__img {
    transform: scale(1.02);
}

/* ── Intro / plain description text ── */
.cs-result-intro {
    font-size: var(--font-size-15);
    font-family: var(--font-regular);
    color: var(--color-desc);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xl);
}

.cs-result-intro p {
    margin-bottom: var(--spacing-sm);
}

/* ── Result items grid ── */
.cs-result-items {
    margin-top: var(--spacing-xl);
}

/* ── Single check-card item ── */
.cs-result-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-14);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light-blue);
    height: 100%;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.cs-result-item:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(var(--primary-color-rgb), 0.30);
}

.cs-result-item__icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--primary-color-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-result-item__icon {
    font-size: var(--font-size-16);
    color: var(--primary-color);
}

.cs-result-item__body {
    flex: 1;
    min-width: 0;
}

.cs-result-item__title {
    display: block;
    font-size: var(--font-size-16);
    font-family: var(--font-semibold);
    color: var(--color-heading);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-snug);
}

.cs-result-item__desc {
    font-size: var(--font-size-13);
    font-family: var(--font-regular);
    color: var(--color-desc);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cs-result-item {
        padding: var(--spacing-md);
    }

    .cs-result-images {
        margin-bottom: var(--spacing-lg);
    }
}

/* ===== END CS RESULT SECTION ===== */

/* ===== END 404 — PAGE NOT FOUND ===== */