.ccc *,
    .ccc *::before,
    .ccc *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-weight: normal !important;
    }

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

    :root {
      --onyx-depth: #111111;
      --onyx-50: rgba(17,17,17,0.5);
      --onyx-25: rgba(17,17,17,0.25);
      --gray: #4C4C4C;
      --pure: #ffffff;
      --pure-60: rgba(255,255,255,0.6);
      --pure-40: rgba(255,255,255,0.4);
      --crimson: #fe3619;
      --onyx-40: #dbdbdb;
      --pub-bg: #252525;
      --font-hero: 90px;
      --font-section: 75px;
      --font-card-lg: 60px;
      --font-card-md: 54px;
      --font-card-sm: 46px;
      --font-heading: 36px;
      --font-caption: 28px;
      --font-body: 24px;
      --font-badge: 20px;
      --container-margin: 60px;
      --section-gap: 120px;
      --padding-sm: 30px;
      --padding-md: 45px;
      --padding-lg: 60px;
      --radius: 15px;
      --radius-pill: 999px;
      --urbanist: 'Urbanist', sans-serif;
      --outfit: 'Outfit', sans-serif;
    }

    .hero-bottom {
      position: absolute;
      bottom: 60px;
      max-width: 1512px;
      width: 100%;
      margin: auto;
    }

    .ccc__hero {
      background: var(--onyx-depth);
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 0 0 var(--radius) var(--radius);
      padding: var(--padding-lg);
      height: 952px;
  }

    /* Subtle dark image texture overlay */
    .ccc__hero::before {
      content: '';
      position: absolute;
      inset: 0;
      /* background: radial-gradient(ellipse at 70% 40%, rgba(60,20,10,0.45) 0%, transparent 65%); */
      pointer-events: none;
    }

    .ccc .hero__image img {
      display: block;
      max-width: 100%;
      position: absolute;
      top: -60%;
      right: -10%;
      width: 1000px;
      opacity: 0.5;
    }

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

    .ccc__hero-title {
      font-family: var(--urbanist);
      font-size: var(--font-caption);
      line-height: 1.0;
      color: var(--pure);
      text-transform: uppercase;
    }
    .ccc__hero-subtitle {
      font-family: var(--urbanist);
      font-size: var(--font-card-md);
      line-height: 1.2;
      color: var(--pure);
      margin: var(--padding-sm) auto;
      font-weight: 300 !important;
    }
    .ccc__hero-subtitle .crimson { color: var(--crimson); }

    .ccc__hero-sub {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--pure-60);
      line-height: 1.65;
      margin-bottom: 40px;
    }

    /* Problem Section */
    .ccc__problem {
      padding: var(--section-gap) var(--padding-lg);
      background: var(--pure);
      max-width: 1512px;
      width: 100%;
      margin: auto;
    }

    .ccc__problem-content {
      display: flex;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: flex-start;
    }

    .ccc__problem-label {
      font-family: var(--urbanist);
      font-size: var(--font-badge);
      color: var(--onyx-50);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid var(--onyx-40);
      border-radius: var(--radius-pill);
    }

    .ccc__problem-left {
      width: 45%;
    }

    .ccc__problem-title {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      line-height: 1.1;
      color: var(--onyx-depth);
      letter-spacing: -1px;
      margin-bottom: var(--padding-sm);
    }

    .ccc__problem-title .crimson {
      color: var(--crimson);
    }

    .ccc__problem-desc {
      font-family: var(--urbanist);
      font-size: var(--font-body);
      color: var(--gray);
      line-height: 1.65;
      margin-bottom: var(--padding-lg);
    }

    .ccc__problem-right-desc {
      color: var(--onyx-50);
      font-family: var(--outfit);
      font-size: var(--font-body);
      line-height: 1.5;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--onyx-25);
      margin-bottom: 30px;
    }

    .ccc__problem-desc-highlight {
      display: block;
      padding-left: var(--padding-sm);
      border-left: 4px solid var(--crimson);
      color: var(--onyx-depth);
      line-height: 1.2;
    }

    .ccc__problem-right {
      font-family: var(--outfit);
      width: 55%;
    }

    .ccc__problem-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .ccc__problem-item {
      font-family: var(--urbanist);
      font-size: var(--font-body);
      color: var(--onyx-50);
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--onyx-25);
    }

    .ccc__problem-item::before {
      content: '•';
      color: var(--crimson);
      font-size: 32px;
      line-height: 1;
    }

    /* Enables Section */
    .ccc__enables {
      background: var(--onyx-depth);
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: var(--radius);
    }

    .ccc__enables::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 85% 100%, rgba(254,54,25,0.15) 0%, transparent 60%);
      pointer-events: none;
    }

    .ccc__enables-content {
      position: relative;
      z-index: 2;
      max-width: 1512px;
      width: 100%;
      padding: var(--padding-lg);
      align-items: flex-start;
      margin: auto;
    }

    .ccc__enables-left { }

    .ccc__enables-label {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--pure-60);
      text-transform: capitalize;
      letter-spacing: 1px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid var(--pure-40);
      border-radius: var(--radius-pill);
    }

    .ccc__enables-title {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      line-height: 1.1;
      color: var(--pure);
      letter-spacing: -1px;
      margin-bottom: var(--padding-sm);
    }

    .ccc__enables-title .crimson {
      color: var(--crimson);
    }

    .ccc__enables-right {
      width: 100%;
    }

    .ccc__enables-body {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--pure-60);
      line-height: 1.65;
      margin-bottom: 20px;
    }

    .ccc__enables-callout {
      background: transparent;
      border: 2px solid var(--crimson);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--pure);
      line-height: 1.65;
      text-align: center;
    }

    /* Key Capabilities Section */
    .ccc__capabilities {
      background: var(--pure);
      width: 100%;
      max-width: 1512px;
      margin: auto;
      padding: var(--section-gap) var(--padding-lg);
      display: flex;
      justify-content: center;
    }

    .ccc__capabilities-content {
      max-width: 1512px;
      width: 100%;
    }

    .ccc__capabilities-label {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
      text-transform: capitalize;
      letter-spacing: 1px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid var(--onyx-40);
      border-radius: var(--radius-pill);
    }

    .ccc__capabilities-title {
      font-family: var(--outfit);
      font-size: var(--font-card-sm);
      line-height: 1.1;
      color: var(--onyx-depth);
      letter-spacing: -1px;
      margin-bottom: var(--padding-sm);
    }

    .ccc__capabilities-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      width: 100%;
    }

    .ccc__capability-card {
      background: var(--pure);
      border: 1px solid var(--onyx-40);
      border-radius: var(--radius);
      padding: var(--padding-sm);
      position: relative;
      transition: all 0.3s ease;
    }

    .ccc__capability-card::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 30px;
      width: 30px;
      height: 2px;
      background: var(--crimson);
      border-radius: var(--radius) 0 0 0;
    }

    .ccc__capability-card-title {
      font-family: var(--outfit);
      font-size: var(--font-caption);
      color: var(--onyx-depth);
      margin-top: 15px;
      margin-bottom: var(--padding-sm);
      line-height: 1.2;
    }

    .ccc__capability-card-desc {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--onyx-50);
      line-height: 1.65;
    }

    /* Better Data Section */
    .ccc__better-data {
      background: var(--pure);
      max-width: 1512px;
      width: 100%;
      margin: auto;
      padding: var(--section-gap) var(--padding-lg);
      display: flex;
      justify-content: center;
    }

    .ccc__better-data-content {
      max-width: 1512px;
      width: 100%;
    }

    .ccc__better-data-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--padding-sm);
      margin-bottom: var(--padding-md);
      align-items: flex-start;
    }

    .ccc__better-data-left { }

    .ccc__better-data-badge {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
      text-transform: capitalize;
      letter-spacing: 1px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-pill);
    }

    .ccc__better-data-heading {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      line-height: 1.1;
      color: var(--onyx-depth);
      letter-spacing: -1px;
      margin-bottom: 0;
    }

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

    .ccc__better-data-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .ccc__better-data-description {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--onyx-50);
      line-height: 1.4;
      margin-bottom: var(--padding-lg);
    }

    .ccc__better-data-sources {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--onyx-40);
      border-right: none;
      border-left: none;
    }

    .ccc__better-data-source {
      text-align: left;
      padding: var(--padding-md) var(--padding-sm);
    }

    .ccc__better-data-source:nth-child(2) {
      border: 1px solid var(--onyx-40);
      border-bottom: none;
      border-top: none;
    }

    .ccc__better-data-source-title {
      font-family: var(--outfit);
      font-size: var(--font-heading);
      color: var(--crimson);
      margin-bottom: var(--padding-sm);
      line-height: 1.2;
    }

    .ccc__better-data-source-desc {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--gray);
      line-height: 1.65;
    }

    /* Key Outcomes Section */

    .ccc__outcomes {
      background: var(--pure);
      max-width: 1521px;
      width: 100%;
      margin: auto;
      padding: 0 var(--padding-lg);
    }

    .ccc__outcomes .crimson {
      color: var(--crimson);
    }
    .ccc__outcomes-inner {
      display: flex;
      gap: 20px;
      align-items: start;
    }
    .ccc__outcomes-left {
      width: 30%;
    }
    .ccc__outcomes-inner > div:nth-child(2) {
      width: 70%;
    }
    .ccc__outcomes-pill-tag {
      display: inline-block;
      border: 1.5px solid var(--gray-light);
      color: var(--gray);
      font-family: var(--outfit);
      font-size: var(--font-badge);
      padding: 5px 14px;
      border-radius: var(--radius-pill);
      margin-bottom: var(--font-body);
    }
    .ccc__outcomes-tag {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
      text-transform: capitalize;
      letter-spacing: 1px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-pill);
    }
    .ccc__outcomes-left h2 {
      font-family: var(--urbanist);
      font-size: var(--font-card-sm);
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }
    .ccc__outcomes-left p {
      font-family: var(--urbanist);
      font-size: var(--font-body);
      color: var(--onyx-50);
      line-height: 1.7;
      max-width: 380px;
    }
    .ccc__outcomes-step {
      border: 1.5px solid var(--onyx-25);
      border-radius: 10px;
      padding: var(--font-badge) var(--font-body);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      cursor: default;
    }
    .ccc__outcomes-step:hover {
      background: var(--crimson);
      cursor: default;
    }
    .ccc__outcomes-step-left h4 {
      font-family: var(--urbanist);
      font-size: var(--font-caption);
      color: var(--onyx-depth);
      margin-bottom: 4px;
      line-height: 1.4;
    }
    .ccc__outcomes-step-left p {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--onyx-50);
    }
    .ccc__outcomes-step:hover .ccc__outcomes-step-left h4 {
      color: var(--pure);
    }
    .ccc__outcomes-step:hover .ccc__outcomes-step-left p {
      color: var(--pure-60);
    }

    .ccc__outcomes-step-right {
      font-family: var(--urbanist);
      font-size: var(--font-section);
      color: var(--onyx-25);
    }
    
    .ccc__final-cta {
      background: var(--onyx-depth);
      width: 100%;
      margin-top: var(--section-gap);
      padding: var(--container-margin);
      position: relative;
      overflow: visible;
      border-radius: var(--radius);
    }

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

    .ccc__final-cta-heading {
      font-family: var(--urbanist);
      font-size: var(--font-card-md);
      color: var(--pure);
      line-height: 1.1;
      letter-spacing: -1px;
    }

    .ccc__final-cta-right { }

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

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

    /* Giant watermark "Let's talk" */
    .ccc__final-cta-watermark {
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      z-index: 1;
      font-family: var(--urbanist);
      font-size: 24vw;
      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%;
      font-weight: 800 !important;
      margin: auto;
    }

    /* In Practice / Case Study Section */
    .ccc__in-practice {
      background: var(--onyx-depth);
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: var(--radius);
      padding: var(--padding-lg);
      margin: 0 auto;
    }

    .ccc__in-practice::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 60%, rgba(254,54,25,0.1) 0%, transparent 60%);
      pointer-events: none;
    }

    .ccc__in-practice-content {
      position: relative;
      z-index: 2;
      max-width: 1512px;
      width: 100%;
      margin: auto;
      gap: var(--padding-lg);
    }

    .ccc__in-practice-content-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 20px;
    }

    .ccc__in-practice-label {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--pure-60);
      text-transform: capitalize;
      letter-spacing: 1px;
      margin-bottom: 15px;
      display: inline-block;
      padding: 8px 16px;
      width: fit-content;
      border: 1px solid var(--pure-40);
      border-radius: var(--radius-pill);
    }

    .ccc__in-practice-left {
      display: flex;
      flex-direction: column;
    }

    .ccc__in-practice-title {
      font-family: var(--urbanist);
      font-size: var(--font-heading);
      line-height: 1.1;
      color: var(--pure);
      letter-spacing: -1px;
      margin-bottom: var(--padding-md);
    }

    .ccc__in-practice-title .crimson {
      color: var(--crimson);
    }

    .ccc__in-practice-desc {
      font-family: var(--outfit);
      font-size: var(--font-badge);
      color: var(--pure-60);
      line-height: 1.65;
      margin-bottom: 15px;
    }

    .ccc__in-practice-left .crimson-box {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--pure-40);
      border: 1px solid var(--crimson);
      border-radius: var(--radius);
      padding: 15px;
      background: #1e101000;
      margin-bottom: var(--padding-sm)
    }


    .ccc__in-practice-left .crimson-box span.pure {
      color: var(--pure);
    }

    .ccc__in-practice-btn {
      align-self: flex-start;
    }

    .ccc__in-practice-right {
      display: flex;
      flex-direction: column;
      gap: var(--padding-md);
    }

    .ccc__in-practice-stat {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 15px;
      border: 1px solid var(--pure-40);
      border-radius: var(--radius);
      padding: 10px;
    }

    .ccc__in-practice-stat-value {
      font-family: var(--urbanist);
      font-size: var(--font-heading);
      line-height: 1.1;
      color: var(--crimson);
      letter-spacing: -1px;
    }

    .ccc__in-practice-stat-label {
      font-family: var(--outfit);
      font-size: var(--font-body);
      color: var(--pure-60);
      line-height: 1.65;
    }
 
    @media (max-width: 1200px) {
      .ccc__final-cta-content {
        padding-bottom: 200px;
      }
    }

    @media (max-width: 1024px) {
      :root {
        --container-margin: 48px;
        --section-gap:      80px;
        --font-hero:        72px;
        --font-section:     54px;
        --font-card-lg:     46px;
        --font-card-md:     40px;
        --font-card-sm:     34px;
        --font-heading:     28px;
        --font-caption:     22px;
        --font-body:        18px;
        --font-badge:       16px;
        --padding-lg:       48px;
        --padding-md:       36px;
      }
      .ccc__final-cta-content {
        padding-bottom: 150px;
      }
      .ccc__problem-content {
        grid-template-columns: 1fr;
      }
      .ccc__enables-content {
        grid-template-columns: 1fr;
      }
      .ccc__enables-right {
        width: 100%;
      }
      .ccc__capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .ccc__better-data-header {
        grid-template-columns: 1fr;
      }
      .ccc__better-data-sources {
        grid-template-columns: 1fr;
      }
      .ccc__better-data-source:nth-child(2) {
        border: 1px solid var(--onyx-40);
        border-right: none;
        border-left: none;
      }
      .ccc__outcomes-inner {
        /* grid-template-columns: 1fr; */
      }
      .ccc__final-cta-buttons  { flex-direction: row; align-items: stretch; }
      .ccc__final-cta          { padding: var(--section-gap) var(--container-margin) 140px; }
      .ccc__final-cta-watermark { font-size: 24vw }
      .ccc__in-practice {
        margin-top: var(--section-gap);
      }
      .ccc__in-practice-content {
        grid-template-columns: 1fr;
      }
      .ccc__in-practice-content {
        grid-template-columns: 1fr;
      }
      .ccc__outcomes-inner {
        flex-direction: column;
      }
      .ccc__outcomes-left,
      .ccc__outcomes-inner > div:nth-child(2) {
        width: 100%;
      }
    }


    @media (max-width: 991px) {
      .ccc__final-cta-buttons {
        justify-content: center;
      }
      .ccc__final-cta-content {
        padding-bottom: 70px;
      }
    }


    @media (max-width: 768px) {
      .ccc__hero {
        height: auto;
      }

      .ccc__hero-content {
        margin-top: 140px; 
      }

      .ccc__problem-content {
        flex-direction: column;
      }
      .ccc__problem-left,
      .ccc__problem-right {
        width: 100%;
      }
      .ccc__capabilities-grid {
        grid-template-columns: 1fr;
      }
      .ccc__better-data-sources {
        grid-template-columns: 1fr;
      }
      .ccc__in-practice {
        padding: var(--padding-sm);
      }
      .ccc__in-practice-content {
        grid-template-columns: 1fr;
        gap: var(--padding-sm);
      }
      .ccc__in-practice-content-inner {
        grid-template-columns: 1fr;
      }
      .ccc__final-cta-content {
        padding-bottom: 0px;
        grid-template-columns: 1fr;
      }
      .ccc__final-cta-watermark {
        font-size: 24vw;
        bottom: 0px;
      }
    }