/* ============================================================
       SCOPED RESET — everything under .about
    ============================================================ */
    .about *,
    .about *::before,
    .about *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-weight: normal !important;
    }

    .about .hero-bottom {
      position: absolute;
      bottom: 60px;
    }

    .about {
      font-family: var(--outfit);
      color: var(--onyx-depth);
      background: var(--pure);
      margin: 0 15px;
    }

    .about a {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .about ul, .about ol{ list-style: none; padding: 0; margin: 0; }
    /* .about img        { display: block; width: 80%; opacity: 0.5;} */

   

    /* ============================================================
       1. HERO SECTION
    ============================================================ */
    .about__hero {
      background: var(--onyx-depth);
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: var(--radius);
      padding: var(--padding-lg);
      min-height: 952px;
      padding-top: 250px;
      text-align: left;
  }

    .about__hero-content {
      position: relative;
      z-index: 2;
      max-width: 1512px;
      width: 100%;
      margin: auto;
      text-align: center;
      margin-bottom: 48px;
    }

    .about-eyebrow {
      font-family: var(--urbanist);
      font-size: var(--font-caption);
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--pure);
      margin-bottom: 20px;
      display: block;
      position: relative;
      z-index: 2;
    }

    .about__hero-title {
      font-family: var(--urbanist);
      font-size: var(--font-card-md);
      line-height: 1.0;
      color: var(--pure);
      letter-spacing: -2px;
      margin-bottom: var(--section-gap);
      text-align: left;
    }
    .about__hero-subtitle {
      font-family: var(--urbanist);
      font-size: var(--font-card-lg);
      line-height: 1.0;
      color: var(--pure);
      letter-spacing: -2px;
      margin-bottom: 28px;
    }
    .about__hero-subtitle .crimson { color: var(--crimson); }

    .about__hero-sub {
      font-family: var(--outfit);
      font-size: var(--font-body);
      font-weight: 400;
      color: var(--pure-60);
      line-height: 1.65;
      margin-bottom: 40px;
      width: 50%;
      margin-left: auto;
      text-align: left;
    }

    .about__hero-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      width: 50%;
      margin-left: auto;
    }
    
    .hero__image img {
      display: block;
      max-width: 100%;
      position: absolute;
      top: -60%;
      right: -20%;
      width: 1000px;
      opacity: 0.5;
    }

    /* ============================================================
       2. FROM DATA EXCHANGE TO DATA INTELLIGENCE
    ============================================================ */
    .about__data-intelligence {
      max-width: 1512px;
      width: 100%;
      margin: var(--section-gap) auto 0;
      padding: 0 var(--container-margin);
    }

    .data-intel__badge-wrapper {
      margin-bottom: 15px;
    }

    .data-intel__badge {
      display: inline-block;
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
      background: transparent;
      padding: 12px 20px;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-pill);
      text-align: center;
    }

    .data-intel__title {
      width: 60%;
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      font-weight: 800;
      color: var(--onyx-depth);
      line-height: 1.1;
      letter-spacing: -1px;
    }

    .data-intel__title .crimson {
      color: var(--crimson);
    }

    .about-onyx-section {
      display: flex;
      margin-top: var(--container-margin);
      gap: 50px;
    }
    
    .data-intel__image-wrapper {
      width: 40%;
      position: relative;
      left: 0;
      bottom: 0;
      margin-left: calc(var(--container-margin) * -1);
      margin-bottom: calc(var(--section-gap) * -1);
      padding-bottom: var(--section-gap);
      overflow: visible;
    }

    .data-intel__image {
      width: 600px;
      height: 600px;
      margin-left: -100px;
      display: block;
      border-radius: 50%;
    }

    .data-intel__content {
      width: 70%;
    }

    .data-intel__description {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--onyx-50);
      line-height: 1.7;
      margin-bottom: var(--padding-sm);
    }

    .data-intel__quote-box {
      border: 1px solid var(--onyx-25);
      padding: var(--padding-sm);
      border-radius: var(--radius);
    }

    .data-intel__quote {
      font-family: var(--outfit);
      font-size: var(--font-caption);
      color: var(--onyx-depth);
      line-height: 1.2;
      margin-bottom: var(--padding-sm);
    }

    .data-intel__author-wrapper {
      display: flex;
      align-items: center;
      gap: var(--padding-md);
    }

    .data-intel__author-image {
      width: 100px;
      height: 100px;
      border-radius: var(--radius);
      background: var(--gray-light);
      flex-shrink: 0;
      /* Author avatar background image (Susheel) */
      background-image: url('https://onyxnew1.wpengine.com/wp-content/uploads/2026/04/Susheel-1.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .data-intel__author-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .data-intel__author-name {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--crimson);
    }

    .data-intel__author-title {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
    }

    /* ============================================================
       5. EXPERT SERVICES (white bg)
    ============================================================ */
    .about__expert {
      border-radius: var(--radius);
      background: var(--pure);
      border: 1px solid var(--onyx-25);
      display: block;
      max-width: 1512px;
      width: 100%;
      margin: auto;
      background: #f0f0f0;
    }

    /* Decorative large circle left */
    .about__expert-circle {
      position: absolute;
      left: calc(var(--container-margin) - 60px);
      top: 50%;
      transform: translateY(-50%);
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(200, 200, 200, 0.15);
      border: 2px solid rgba(200, 200, 200, 0.3);
      pointer-events: none;
    }

    .about__expert-left {
      position: relative;
      z-index: 2;
      padding: var(--container-margin);
      padding-bottom: 0;
    }

    .about__expert-heading {
      font-family: var(--urbanist);
      font-size: var(--font-section);
      font-weight: 800;
      color: var(--onyx-depth);
      line-height: 1.1;
      letter-spacing: -1px;
      margin-top: 16px;
      width: 50%;
    }
    .about__expert-heading .crimson { color: var(--crimson); }

    .about__expert-right .expert__left img {
      width: 80%;
    }

    .about__expert-body {
      font-family: var(--outfit);
      font-size: var(--font-body);
      font-weight: 400;
      color: var(--onyx-50);
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .about__author-flex {
      display: flex;
      justify-content: space-between;
    }
    .about__author-details {
        font-family: var(--outfit);
        font-size: var(--font-body);
        color: var(--onyx-50);
    }
    .about__quote-img img {
      width: 100px;
    }

    .about__timeline {
      background: var(--onyx-depth);
      color: var(--pure-60);
      border-radius: var(--radius);
    }

    .about .timeline__header {
      padding: var(--container-margin);
    }

    .about .timeline__overline {
      display: inline-block;
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--pure);
      background: transparent;
      padding: 12px 20px;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-pill);
      text-align: center;
    }

    .about .timeline__title {
      width: 90%;
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      color: var(--pure);
      line-height: 1.1;
      margin-top: var(--padding-sm);
    }

    .about .timeline__content {
      margin-left: auto;
      width: 60%;
      padding-right: var(--container-margin);
    }

    .about .timeline__content p {
      font-size: var(--font-body);
      font-family: var(--outfit);
      margin-bottom: var(--padding-sm);
    }
    .about__parallax-desc {
      display: flex;
      padding: var(--container-margin);
      align-items: flex-start;
    }
    .about__parallax-text div {
      font-size: 12vw;
      overflow: auto;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: none;
    }
    .about__our-story {
      width: 30%;
    }
    .about__our-story div {
      display: inline-block;
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--pure);
      background: transparent;
      padding: 12px 20px;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-pill);
      text-align: center;
    }
    .about__know-more {
      font-size: var(--font-body);
      font-family: var(--outfit);
      display: flex;
      gap: 60px;
      flex-direction: column;
      width: 70%;
    }
    /* View Services link styling */
    .about__expert-right .about__link-arrow {
      display: inline-flex;
      gap: 8px;
      color: var(--onyx-depth);
      margin-bottom: 40px;
    }

    /* Step pills row */
    .about__expert-steps {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 50px;
      border-top: none;
      padding-top: 0;
    }

    .about__expert-step {
      flex: 0 1 auto;
      font-family: var(--outfit);
      font-size: var(--font-badge);
      font-weight: 600;
      color: var(--onyx-depth);
      text-align: center;
      padding: 12px 24px;
      border: 1.5px solid var(--onyx-25);
      border-right: 1.5px solid var(--onyx-25);
      border-radius: var(--radius-pill);
      background: transparent;
      transition: all 0.2s ease;
      text-transform: uppercase;
    }
    .about__expert-step:hover {
      border-color: var(--onyx-depth);
      background: var(--onyx-depth);
      color: var(--pure);
    }
    .about__expert-step:last-child { border-right: 1.5px solid var(--onyx-25); }
    
    .about__expert-right{
      display: flex;
      position: relative;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      margin-top: 50px;
    }

    .about__flex {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 50px;
    }
    .about__expert-desc {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--onyx-50);
      line-height: 1.7;
      margin-bottom: 24px;
      margin-top: 20px;
      width: 50%;
    }
    /* LEFT SIDE */
    .about__expert-right .expert__left {
      position: absolute;
      height: 100%;
      overflow: hidden;
      z-index: 9;
      width: 40%;
      bottom: 0;
      left: 0;
    }

    .about__expert-right .expert__right {
      position: relative;
      z-index: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 60%;
      background: var(--pure);
      padding: 20px;
      border-radius: var(--radius);
      margin-right: var(--container-margin);
      margin-bottom: var(--container-margin);
      margin-left: auto;
    }

    p.about__author {
      color: var(--crimson);
    }

    /* ============================================================
    5. PROVEN AT SCALE
    ============================================================ */
    .about__proven-scale {
      max-width: 1512px;
      width: 100%;
      margin: auto;
      padding: var(--section-gap) var(--container-margin);
      border-radius: var(--radius);
      background: var(--pure);
    }

    .proven-scale__badge {
      display: inline-block;
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
      border: 1px solid var(--onyx-25);
      padding: 12px 24px;
      border-radius: var(--radius-pill);
      margin: 0 auto var(--padding-sm);
      text-align: center;
    }

    .badge__wrapper {
      text-align: center;
    }

    .proven-scale__title {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      font-weight: 800;
      color: var(--onyx-depth);
      line-height: 1.1;
      letter-spacing: -1px;
      text-align: center;
      margin-bottom: var(--padding-lg);
    }

    .proven-scale__section {
      margin-bottom: var(--padding-sm);
    }

    .proven-scale__grid-70-30 {
      display: flex;
      justify-content: center;
      gap: var(--padding-sm);
    }

    .proven-scale__card-70 {
      width: 60%;
      background: var(--pure);
      border: 1px solid var(--onyx-25);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .proven-scale__card-70 div {
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .proven-scale__card-30 {
      width: 40%;
      border: 1px solid var(--onyx-25);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .proven-scale__card-70 .card__stat {
      font-family: var(--urbanist);
      font-size: var(--font-section);
      color: var(--crimson);
      line-height: 1.1;
      letter-spacing: -1px;
    }

    .proven-scale__card-70 .card__label {
      font-family: var(--urbanist);
      font-size: var(--font-card-md);
      line-height: 1.1;
    }

    .proven-scale__card-70 .card__description {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .proven-scale__card-70 .card__description div {
      border: 1px solid var(--onyx-25);
      padding: 10px 20px;
      border-radius: 999px;
    }

    .proven-scale__card-30 .card__stat {
      font-family: var(--urbanist);
      font-size: var(--font-card-lg);
      color: var(--crimson);
      margin-bottom: var(--padding-md);
    }

    .proven-scale__card-30 .card__label {
      font-family: var(--urbanist);
      font-size: var(--font-heading);
      color: var(--onyx-depth);
      margin-bottom: var(--padding-sm);
      line-height: 1.2;
    }

    .proven-scale__card-30 .card__description {
      font-size: var(--font-body);
      font-family: var(--outfit);
      color: var(--onyx-50);
    }

    .proven-scale__grid-50-50 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--padding-sm);
    }

    .proven-scale__card-50,
    .proven-scale__card-50_right {
      border: 1px solid var(--onyx-25);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .proven-scale__card-50 .card__stat {
      font-size: var(--font-card-sm);
      text-align: right;
      line-height: 1.1;
    }

    .proven-scale__card-50 .card__description {
      margin-top: 50px;
    }

    .proven-scale__card-50 .card__description .count {
      font-family: var(--urbanist);
      font-size: var(--font-card-lg);
      color: var(--crimson);
    }

    .proven-scale__card-50 .card__description .label {
      font-family: var(--outfit);
      font-size: var(--font-heading);
      color: var(--onyx-depth);
      line-height: 1.4;
    }

    .proven-scale__card-50_right .card__stat {
      font-family: var(--urbanist);
      font-size: var(--font-card-lg);
      color: var(--crimson);
      margin-bottom: 15px;
      text-align: left;
    }

    .proven-scale__card-50_right .card__label {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      color: var(--onyx-depth);
      margin-bottom: 15px;
      text-align: left;
      line-height: 1.2;
    }

    .proven-scale__card-50_right .card__description {
      width: 50%;
      text-align: right;
      margin-left: auto;
      margin-top: var(--padding-lg);
      color: var(--onyx-50);
    }

    .proven-scale__grid-30-70 {
      display: flex;
      justify-content: center;
      gap: var(--padding-sm);
    }

    .proven-scale__card-30-layout {
      width: 40%;
      border: 1px solid var(--onyx-25);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .proven-scale__card-30-layout .card__stat {
      font-size: var(--font-heading);
      font-family: var(--urbanist);
    }

    .proven-scale__card-30-layout .card__description {
      font-size: var(--font-body);
      font-family: var(--outfit);
      color: var(--onyx-50);
      margin-top: var(--padding-md);
    }

    .proven-scale__card-70-layout {
      width: 60%;
      background: var(--onyx-depth);
      border: 1px solid var(--onyx-25);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .proven-scale__card-70-layout .card__section-title {
      color: var(--pure);
      font-size: var(--font-card-md);
      font-family: var(--urbanist);
      line-height: 1.2;
    }

    .proven-scale__card-70-layout .card__description {
      color: var(--pure-40);
      font-family: var(--outfit);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 60px;
    }


    .proven-scale__card-70-layout .microsoft-logo img {
      width: 150px;
    }

    /* ============================================================
    6. Behind Onyx
    ============================================================ */
    
    section.about__related-articles {
      padding: var(--section-gap) var(--container-margin);
      max-width: 1512px;
      width: 100%;
      margin: auto;
      padding-top: 0;
    }

    .about__overline {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 20px;
      display: block;
    }
    .about__overline--dark  {
      color: var(--onyx-50);
      border: 1px solid var(--onyx-25);
      width: fit-content;
      padding: 12px 20px;
      border-radius: 50px;;
    }
    .about__overline--light { 
      color: var(--pure-60);
      border: 1px solid var(--pure-40);
      width: fit-content;
      padding: 5px 20px;
      border-radius: var(--radius-pill);
    }
    .about__overline--red   { color: var(--crimson); }
    .about__related-articles .container {
      max-width: 100%;
      padding: 0;
    }
    .about__challenge-top {
      width: 60%;
    }
    .about__related-articles .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: self-end;
      margin-bottom: 40px;
    }
    .about__related-articles .nav-btn:hover {
      background: var(--onyx-depth);
      color: var(--pure);
      border-color: var(--onyx-depth);
    }
    .about__related-articles .top-bar h2 {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      color: var(--onyx-depth);
      line-height: 1.1;
      letter-spacing: -1.5px;
      
    }
    .about__related-articles .nav-btn svg {
      width: 20px;
      height: 20px;
      stroke: var(--onyx-50);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.25s ease;
    }
    .about__related-articles .nav-btn:hover svg {
      stroke: var(--pure);
    }
    .about__related-articles .nav-btn {
      width: 40px;
      height: 40px;
      border: 1px solid var(--onyx-25);
      background: var(--pure);
      border-radius: 100%;
      cursor: pointer;
      font-size: 20px;
      color: var(--onyx-depth);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      font-weight: bold;
    }
    .about__related-articles .nav {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      align-items: flex-end;
      margin: initial;
      position: relative;
      right: 50px;
    }
    .about .blog-card {
      border: 1px solid var(--onyx-25);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      display: flex;
      flex-direction: column;
      min-height: 180px;
      gap: 80px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .about .blog-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--onyx-depth);
      transform: translateY(-100%);
      transition: transform 300ms ease-out;
      border-radius: inherit;
      z-index: 0;
    }
    .about .blog-card > * {
      position: relative;
      z-index: 1;
    }
    .about .blog-card:hover::before { transform: translateY(0); }
    .about .blog-card:hover p.card-title {
      color: var(--pure);
      transition: color 300ms ease-out;
    }
    .about .blog-card:hover p.card-content {
      color: var(--pure-60);
      transition: color 300ms ease-out;
    }
    .about .blog-card p.card-title {
      font-size: var(--font-caption);
      height: 100px; 
    }
    .about .blog-card p.card-content {
      font-size: var(--font-body);
      color: var(--onyx-50);
    }

    
    /* ============================================================
       6. FINAL CTA SECTION (dark)
    ============================================================ */
    .about__final-cta * {
      font-weight: normal !important;
    }
    .about__final-cta {
      background: var(--onyx-depth);
      width: 100%;
      padding: var(--container-margin);
      position: relative;
      overflow: visible;
      border-radius: var(--radius);
    }

    .about__final-cta-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      align-items: self-start;
      padding-bottom: 200px;
      max-width: 1512px;
      width: 100%;
      margin: auto;
    }

    .about__final-cta-heading {
      font-family: var(--urbanist);
      font-size: var(--font-section);
      font-weight: 800;
      color: var(--pure);
      line-height: 1.1;
      letter-spacing: -1px;
    }

    .about__final-cta-right { }

    .about__final-cta-body {
      font-family: var(--outfit);
      font-size: var(--font-body);
      font-weight: 400;
      color: var(--pure-60);
      line-height: 1.65;
      margin-bottom: 32px;
    }

    .about__final-cta-buttons {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* Giant watermark "Let's talk" */
    .about__final-cta-watermark {
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      z-index: 1;
      font-family: var(--urbanist);
      font-size: 24vw;
      font-weight: 800 !important;
      color: rgba(255,255,255,0.05);
      line-height: 0.85;
      letter-spacing: -4px;
      user-select: none;
      pointer-events: none;
      white-space: nowrap;
      overflow: visible;
      text-align: center;
      width: 100%;
      margin: auto;
    }

    @media (max-width: 1200px) {
      .about__expert-right .expert__left {
        display: none;
      }
      .about__expert-right .expert__right {
        width: 100%;
        margin-left: var(--container-margin);
      }
    }
    /* ============================================================
       RESPONSIVE — Tablet (≤ 1024px)
    ============================================================ */
    @media (max-width: 1024px) {
      .about__hero {
        min-height: 800px;
      }
      .about__proven-scale {
        padding: var(--padding-md);
        margin: var(--padding-lg) auto;
      }

      .proven-scale__title {
        font-size: 36px;
      }

      .proven-scale__subtitle {
        font-size: 18px;
      }

      .proven-scale__grid-70-30,
      .proven-scale__grid-50-50,
      .proven-scale__grid-30-70 {
        flex-direction: column;
        gap: var(--padding-sm);
      }

      .proven-scale__grid-50-50 {
        grid-template-columns: 1fr
      }

      .proven-scale__card-70,
      .proven-scale__card-30,
      .proven-scale__card-50,
      .proven-scale__card-30-layout,
      .proven-scale__card-70-layout {
        padding: var(--padding-sm);
        width: 100%;
        min-height: 250px;
      }

      .card__stat {
        font-size: var(--font-card-sm);
      }

      .card__label {
        font-size: 20px;
      }

      .card__description {
        font-size: 16px;
      }

      .about__expert              { grid-template-columns: 1fr; gap: 40px; padding: var(--section-gap) var(--container-margin); }
      .about__expert-circle       { display: none; }
      .about__expert-steps        { gap: 12px; justify-content: flex-start; }
      .about__expert-step         { flex: 0 1 auto; padding: 10px 20px; font-size: var(--font-badge); }

      .about__hero-buttons       { flex-direction: row; align-items: stretch; }
      .about__btn                { justify-content: center; }

      .about__final-cta-buttons  { flex-direction: row; align-items: stretch; }
      .about__final-cta          { padding: var(--section-gap) var(--container-margin) 140px; }
      .about__final-cta-watermark { font-size: 25vw }
    }
    
    @media (max-width: 1024px) {
      .timeline__item {
        flex: 0 0 calc(50% - var(--padding-lg) / 2);
      }

      .timeline__description {
        font-size: var(--font-caption);
      }
    }

    @media (max-width: 768px) {
      .about__hero {
        min-height: 580px;
      }
      .about__timeline {
      }

      .timeline__title {
        font-size: 36px;
      }

      .timeline__item {
        flex: 0 0 100%;
      }

      .timeline__date {
        font-size: var(--font-card-md);
      }

      .timeline__description {
        font-size: 16px;
        max-height: 250px;
      }
    }

    @media (max-width: 500px) {
      .about__timeline {
      }

      .timeline__title {
        font-size: 28px;
      }

      .timeline__date {
        font-size: var(--font-card-sm);
      }

      .timeline__label {
        font-size: 16px;
      }

      .timeline__description {
        font-size: 14px;
      }
    }

    @media (max-width: 991px) {
      .about__hero-sub,
      .about__hero-buttons {
        width: 100%;
      }
      .about .timeline__header {
        padding: var(--padding-sm);
        margin-top: var(--section-gap);
      }
      .about__challenge-body .left {
        display: none;
      }
      .about__challenge-body .right {
        width: 100%;
        padding: 40px 0;
      }
      .about__final-cta-content {
        padding-bottom: 70px;
      }
      .data-intel__image-wrapper {
        display: none;
      }
      .data-intel__content {
        width: 100%;
      }
      .about .timeline__content {
        width: 100%;
        padding: 0 var(--padding-sm);
      }
      .about__parallax-desc {
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
      .about__our-story {
        margin-bottom: var(--padding-sm);
      }
      .about__our-story,
      .about__know-more {
        width: 100%;
      }
      .about__flex {
        flex-direction: column;
      }
      .proven-scale__card-70 .card__stat {
        font-size: 46px;
      }
      .about__expert-heading,
      .about__expert-desc {
        width: 100%;
      }
    }
    /* ============================================================
       RESPONSIVE — Mobile (≤ 768px)
    ============================================================ */
    @media (max-width: 768px) {
      .about__hero               { height: 800px;
        padding-top: 250px; }
      .about__hero-title         { letter-spacing: -1px; }

      .about__hero-buttons       { flex-direction: row; align-items: stretch; }
      .about__btn                { justify-content: center; }

      .about__data-intelligence {
        grid-template-columns: 1fr;
        padding: 0 var(--padding-lg);
      }

      .data-intel__image {
        width: 300px;
        height: 300px;
      }

      .about__final-cta-buttons  { flex-direction: row; align-items: stretch; }
      .about__final-cta          { padding: var(--section-gap) var(--container-margin) 100px; }
      .about__final-cta-watermark { font-size: 25vw; bottom: -14px; }
      
      .about__final-cta-content {
        padding-bottom: 70px;
        grid-template-columns: 1fr;
      }
      .about__final-cta-buttons {
        justify-content: center;
      }
      .about .blog-card .top-bar {
        margin-bottom: 20px;
      }
      .about .blog-card p.card-title {
        height: 30px;
      }
      .proven-scale__card-70 .card__stat {
        font-size: 80px;
      }
      .proven-scale__card-50 .card__stat {
        text-align: left;
      }
      .proven-scale__card-70 div {
        flex-direction: column;
        align-items: flex-start;
      }
      .proven-scale__card-70 .card__description {
        margin-top: var(--padding-sm);
      }
      .proven-scale__card-70 .card__description div {
        flex-direction: row;
      }
      .proven-scale__card-50_right .card__description {
        width: 100%;
        text-align: left;
      }
    }

    @media (max-width: 500px) {
      .about__data-intelligence {
        padding: 0 var(--padding-sm);
      }

      .data-intel__image {
        width: 250px;
        height: 250px;
      }

      .data-intel__description {
        font-size: 16px;
      }

      .data-intel__quote {
        font-size: 18px;
      }
    }