:root {
      --bg-canvas: #f0ece3; 
      --navy: #151e3f;
      --navy-hover: #2a3863;
      --purple-line: #3513a3;
      --yellow-node: #fedd15;
      
      --font-sans: 'Inter', sans-serif;
      --font-serif: 'Fraunces', serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    body {
      background-color: var(--bg-canvas);
      color: var(--navy);
      font-family: var(--font-sans);
      margin: 0;
      overflow-x: hidden;
    }

    .eco-page-wrapper {
      padding-top: 140px; 
      padding-bottom: 100px;
      max-width: 1000px;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
    }

    /* --- Top Content Sections --- */

    .eco-section-heading {
      font-family: var(--font-serif);
      font-size: 2.8rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 40px;
      padding-left: 5%;
    }

    
    /* =========================================================================
       ABSOLUTE PROPORTIONAL TIMELINE CANVAS (Perfect Precision Fix)
       ========================================================================= */
    .timeline-canvas {
      position: relative;
      width: 100%;
      margin: 0 auto 120px auto;
      container-type: inline-size; 
      overflow: visible;
    }

    /* Locking aspect ratios to match the provided Vector images */
    .canvas-1 { aspect-ratio: 1569 / 2666; max-width: 700px; } /* How They Work Together */
    .canvas-2 { aspect-ratio: 1561 / 1905; max-width: 650px; } /* MSME Path */

    /* The exact vector image as a background layer */
    .timeline-bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 1; /* Keeps line strictly behind the circles */
      pointer-events: none;
    }

    /* The Positioned Nodes (Centers exactly on the X/Y coordinates) */
    .t-node {
      position: absolute;
      z-index: 10; 
      background-color: var(--yellow-node);
      border-radius: 50%;
      box-shadow: 2px 4px 15px rgba(0,0,0,0.15);
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(-50%, -50%); 
    }

    /* Circle Widths mapped dynamically to container size via CQW */
    .sz-1 { width: 33cqw; height: 33cqw; } /* Marwar Venture */
    .sz-2 { width: 18cqw; height: 18cqw; } /* ComplySetu */
    .sz-3 { width: 30cqw; height: 30cqw; } /* Software Arm */
    .sz-4 { width: 42cqw; height: 42cqw; } /* Marwar Ink */
    .sz-5 { width: 14cqw; height: 14cqw; } /* Skill Craft */

    .sz-m1 { width: 21cqw; height: 21cqw; } /* MSME ComplySetu */
    .sz-m2 { width: 32cqw; height: 32cqw; } /* MSME Software Auto */
    .sz-m3 { width: 43cqw; height: 43cqw; } /* MSME Software Tools */

    /* Text blocks attached to the circles */
    .t-text {
      position: absolute;
      font-family: var(--font-serif);
      font-size: clamp(13px, 3.4cqw, 24px); 
      color: var(--navy);
      line-height: 1.2;
      white-space: nowrap; 
    }

    .t-text.left { 
      right: calc(100% + 14px); 
      text-align: right; 
    }
    
    .t-text.right { 
      left: calc(100% + 14px); 
      text-align: left; 
    }

    /* End Buttons attached to the vector tails */
    .btn-timeline-end {
      position: absolute;
      background-color: var(--purple-line);
      color: var(--yellow-node);
      font-family: var(--font-serif);
      font-size: clamp(14px, 3.6cqw, 24px);
      font-weight: 700;
      padding: 10px 24px;
      border-radius: 8px;
      border: none;
      box-shadow: 0 4px 15px rgba(48, 0, 188, 0.35);
      z-index: 10;
      transform: translate(-50%, -50%);
      cursor: default;
      white-space: nowrap;
    }

    /* --- MOBILE RESPONSIVE --- */
    @media (max-width: 768px) {

      .eco-section-heading { font-size: 2.2rem; padding-left: 0; }

    }