/* ====================================================
   PROCESS REDESIGN (PHASE 2R-SAFE)
   STRICTLY ISOLATED CSS
==================================================== */

/* Base Section adjustments */
#process.lime-section {
  position: relative;
  background-color: var(--light-bg-primary, #fbfbfb);
  overflow-x: clip;
  overflow-y: visible;
  /* Natural height, controlled spacing */
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}

/* Background Atmosphere */
#process .lime-process-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(to right, rgba(138, 232, 28, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(138, 232, 28, 0.02) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: center;
}

#process .lime-process-v2__bg-glow {
  position: absolute;
  top: 40%;
  left: 35%;
  width: 30%;
  height: 40%;
  background: radial-gradient(ellipse at center, rgba(138, 232, 28, 0.05) 0%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

/* Inner Container */
#process .lime-inner--standard {
  position: relative;
  z-index: 2;
}

/* Header Composition */
#process .lime-process-v2__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px; /* Reduced dead space ~30% */
  max-width: 1440px;
}

#process .lime-process-v2__header-left {
  max-width: 56%;
}

#process .lime-process-v2__eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-text-muted);
  margin-bottom: var(--space-md);
  font-weight: 600;
}

#process .lime-process-v2__heading {
  font-size: clamp(3rem, 4.5vw, 4.5rem); /* Strengthened */
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--light-text-heading);
  margin: 0;
}

#process .lime-process-v2__header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--light-text-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 8px;
}

#process .lime-process-v2__header-right-line {
  width: 40px;
  height: 1px;
  background-color: var(--lime-primary);
}

/* Flow Container */
#process .lime-process-v2__flow-container {
  position: relative;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* SVG Flow Path */
#process .lime-process-v2__path-svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 160px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}

#process .lime-process-v2__ribbon-haze,
#process .lime-process-v2__ribbon-body {
  fill: none;
  stroke: url(#lime-process-ribbon-grad);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

#process .lime-process-v2__ribbon-haze {
  stroke-width: 40;
  opacity: 0.35;
}

#process .lime-process-v2__ribbon-body {
  stroke-width: 20;
  opacity: 0.6;
}

#process .lime-process-v2__path-line {
  fill: none;
  stroke: var(--lime-primary);
  stroke-width: 4;
  stroke-dasharray: 400 2000;
  stroke-dashoffset: 2000;
  opacity: 1;
}

/* Stages Grid */
#process .lime-process-v2__stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  perspective: 1200px; /* Enable restrained 3D perspective */
}

/* Individual Stage (INACTIVE STATE) */
#process .lime-process-v2__stage {
  position: relative;
  padding: 32px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(0, 60, 20, 0.04);
  border-right: 1px solid rgba(0, 60, 20, 0.04);
  border-radius: 16px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05), 
    inset 0 -1px 0 rgba(0, 60, 20, 0.05), 
    0 12px 30px rgba(6, 60, 25, 0.05), 
    0 8px 20px rgba(0, 0, 0, 0.04), 
    0 60px 80px -20px rgba(138, 232, 28, 0.01); /* Weak grounding */
  backdrop-filter: blur(12px);
  transition: transform 0.4s ease, box-shadow 0.4s ease, scale 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  scale: 1;
  z-index: 1;
}

/* Subtle Satin Sheen */
#process .lime-process-v2__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* Active Spotlight State Layer */
#process .lime-process-v2__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% -20%, rgba(138, 232, 28, 0.4), transparent 70%), linear-gradient(145deg, #189b38, #0b571e); /* Rich emerald spotlight */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3), 
    inset 0 -15px 30px -10px rgba(138, 232, 28, 0.55), /* Strong ribbon reflection */
    0 30px 60px rgba(6, 60, 25, 0.35), 
    0 80px 100px -20px rgba(138, 232, 28, 0.2); /* Strong light pool */
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Tonal Variations (Inactive Base) */
#process .lime-process-v2__stage:nth-child(1) {
  background: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.1), transparent 30%), radial-gradient(circle at 85% 100%, rgba(0, 70, 25, 0.1), transparent 42%), linear-gradient(145deg, rgba(24, 155, 56, 0.15), rgba(17, 120, 42, 0.15) 48%, rgba(11, 87, 30, 0.15));
}
#process .lime-process-v2__stage:nth-child(2) {
  background: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.1), transparent 30%), radial-gradient(circle at 85% 100%, rgba(0, 70, 25, 0.1), transparent 42%), linear-gradient(145deg, rgba(29, 166, 63, 0.15), rgba(21, 133, 48, 0.15) 48%, rgba(13, 99, 34, 0.15));
}
#process .lime-process-v2__stage:nth-child(3) {
  background: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.1), transparent 30%), radial-gradient(circle at 85% 100%, rgba(0, 70, 25, 0.1), transparent 42%), linear-gradient(145deg, rgba(36, 181, 72, 0.15), rgba(25, 149, 56, 0.15) 48%, rgba(17, 114, 40, 0.15));
}
#process .lime-process-v2__stage:nth-child(4) {
  background: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.1), transparent 30%), radial-gradient(circle at 85% 100%, rgba(0, 70, 25, 0.1), transparent 42%), linear-gradient(145deg, rgba(21, 140, 49, 0.15), rgba(15, 110, 36, 0.15) 48%, rgba(9, 80, 26, 0.15));
}

/* Asymmetrical Staggering on Desktop */
@media (min-width: 1280px) {
  #process .lime-process-v2__stage:nth-child(1) { transform: translateY(0px); }
  #process .lime-process-v2__stage:nth-child(2) { transform: translateY(24px); }
  #process .lime-process-v2__stage:nth-child(3) { transform: translateY(-12px); }
  #process .lime-process-v2__stage:nth-child(4) { transform: translateY(32px); }
  
  /* Initial state for animation */
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(1) { transform: translateY(20px); }
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(2) { transform: translateY(44px); }
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(3) { transform: translateY(8px); }
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(4) { transform: translateY(52px); }
}

/* Stage Header (Number + Symbol) */
#process .lime-process-v2__stage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

#process .lime-process-v2__number {
  font-size: clamp(52px, 5vw, 68px);
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #000000;
  opacity: 0.8; /* Inactive */
}

#process .lime-process-v2__symbol {
  width: 36px;
  height: 36px;
  stroke: #000000;
  stroke-width: 2.5;
  fill: none;
  opacity: 0.8; /* Inactive */
}

/* Stage Content */
#process .lime-process-v2__stage-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #000000; /* Inactive */
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

#process .lime-process-v2__stage-desc {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: #000000; /* Inactive */
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ====================================================
   ANIMATION: ACTIVE STATE
==================================================== */

/* Trigger Path Animation */
#process.lime-process-v2--active .lime-process-v2__path-line {
  animation: limeProcessV2PathDrawCore 8s linear infinite 0.2s;
}

#process.lime-process-v2--active .lime-process-v2__ribbon-body,
#process.lime-process-v2--active .lime-process-v2__ribbon-haze {
  animation: limeProcessV2PathDraw 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Trigger Stage Animation (Sequential) */
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) { animation: limeProcessV2StageFade 0.6s ease forwards 0.2s, limeProcessV2Float 4s ease-in-out infinite 0.8s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) { animation: limeProcessV2StageFade 0.6s ease forwards 0.6s, limeProcessV2Float 4s ease-in-out infinite 1.6s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) { animation: limeProcessV2StageFade 0.6s ease forwards 1.0s, limeProcessV2Float 4s ease-in-out infinite 2.4s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) { animation: limeProcessV2StageFade 0.6s ease forwards 1.4s, limeProcessV2Float 4s ease-in-out infinite 3.2s; }

/* Stage Active Highlights (Sequential Infinite Loop) */
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) .lime-process-v2__number { animation: limeProcessV2Highlight 8s ease infinite 0.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) .lime-process-v2__number { animation: limeProcessV2Highlight 8s ease infinite 2.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) .lime-process-v2__number { animation: limeProcessV2Highlight 8s ease infinite 4.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) .lime-process-v2__number { animation: limeProcessV2Highlight 8s ease infinite 6.2s; }

#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) .lime-process-v2__symbol { animation: limeProcessV2SymbolHighlight 8s ease infinite 0.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) .lime-process-v2__symbol { animation: limeProcessV2SymbolHighlight 8s ease infinite 2.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) .lime-process-v2__symbol { animation: limeProcessV2SymbolHighlight 8s ease infinite 4.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) .lime-process-v2__symbol { animation: limeProcessV2SymbolHighlight 8s ease infinite 6.2s; }

#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) .lime-process-v2__stage-title,
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) .lime-process-v2__stage-desc { animation: limeProcessV2TextHighlight 8s ease infinite 0.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) .lime-process-v2__stage-title,
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) .lime-process-v2__stage-desc { animation: limeProcessV2TextHighlight 8s ease infinite 2.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) .lime-process-v2__stage-title,
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) .lime-process-v2__stage-desc { animation: limeProcessV2TextHighlight 8s ease infinite 4.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) .lime-process-v2__stage-title,
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) .lime-process-v2__stage-desc { animation: limeProcessV2TextHighlight 8s ease infinite 6.2s; }

#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1)::after { animation: limeProcessV2AuraHighlight 8s ease infinite 0.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2)::after { animation: limeProcessV2AuraHighlight 8s ease infinite 2.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3)::after { animation: limeProcessV2AuraHighlight 8s ease infinite 4.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4)::after { animation: limeProcessV2AuraHighlight 8s ease infinite 6.2s; }

/* Active Scale and Deepened Shadow (Sequential Infinite Loop) */
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) { animation: limeProcessV2StageFade 0.6s ease forwards 0.2s, limeProcessV2Float 4s ease-in-out infinite 0.8s, limeProcessV2ActiveScale 8s ease infinite 0.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) { animation: limeProcessV2StageFade 0.6s ease forwards 0.6s, limeProcessV2Float 4s ease-in-out infinite 1.6s, limeProcessV2ActiveScale 8s ease infinite 2.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) { animation: limeProcessV2StageFade 0.6s ease forwards 1.0s, limeProcessV2Float 4s ease-in-out infinite 2.4s, limeProcessV2ActiveScale 8s ease infinite 4.2s; }
#process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) { animation: limeProcessV2StageFade 0.6s ease forwards 1.4s, limeProcessV2Float 4s ease-in-out infinite 3.2s, limeProcessV2ActiveScale 8s ease infinite 6.2s; }


/* Keyframes */
@keyframes limeProcessV2PathDrawCore {
  0% { stroke-dashoffset: 2000; opacity: 0; }
  10% { opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -400; opacity: 0; }
}

@keyframes limeProcessV2PathDraw {
  0% { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}

@keyframes limeProcessV2StageFade {
  0% { opacity: 0; }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes limeProcessV2Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes limeProcessV2ActiveScale {
  0% { scale: 1; }
  25% { scale: 1.05; }
  100% { scale: 1; }
}

/* Specific restoration for desktop stagger during animation */
@media (min-width: 1280px) {
  @keyframes limeProcessV2StageFade-1 { 100% { opacity: 1; transform: translateY(0px) rotateX(1deg) rotateY(1.5deg); } }
  @keyframes limeProcessV2StageFade-2 { 100% { opacity: 1; transform: translateY(24px) rotateX(0.5deg) rotateY(0.5deg); } }
  @keyframes limeProcessV2StageFade-3 { 100% { opacity: 1; transform: translateY(-12px) rotateX(0.5deg) rotateY(-0.5deg); } }
  @keyframes limeProcessV2StageFade-4 { 100% { opacity: 1; transform: translateY(32px) rotateX(1deg) rotateY(-1.5deg); } }
  
  @keyframes limeProcessV2Float-1 { 0%, 100% { transform: translateY(0px) rotateX(1deg) rotateY(1.5deg); } 50% { transform: translateY(-8px) rotateX(1deg) rotateY(1.5deg); } }
  @keyframes limeProcessV2Float-2 { 0%, 100% { transform: translateY(24px) rotateX(0.5deg) rotateY(0.5deg); } 50% { transform: translateY(16px) rotateX(0.5deg) rotateY(0.5deg); } }
  @keyframes limeProcessV2Float-3 { 0%, 100% { transform: translateY(-12px) rotateX(0.5deg) rotateY(-0.5deg); } 50% { transform: translateY(-20px) rotateX(0.5deg) rotateY(-0.5deg); } }
  @keyframes limeProcessV2Float-4 { 0%, 100% { transform: translateY(32px) rotateX(1deg) rotateY(-1.5deg); } 50% { transform: translateY(24px) rotateX(1deg) rotateY(-1.5deg); } }

  #process.lime-process-v2--active .lime-process-v2__stage:nth-child(1) { animation: limeProcessV2StageFade-1 0.6s ease forwards 0.2s, limeProcessV2Float-1 4s ease-in-out infinite 0.8s, limeProcessV2ActiveScale 8s ease infinite 0.2s; }
  #process.lime-process-v2--active .lime-process-v2__stage:nth-child(2) { animation: limeProcessV2StageFade-2 0.6s ease forwards 0.6s, limeProcessV2Float-2 4s ease-in-out infinite 1.6s, limeProcessV2ActiveScale 8s ease infinite 2.2s; }
  #process.lime-process-v2--active .lime-process-v2__stage:nth-child(3) { animation: limeProcessV2StageFade-3 0.6s ease forwards 1.0s, limeProcessV2Float-3 4s ease-in-out infinite 2.4s, limeProcessV2ActiveScale 8s ease infinite 4.2s; }
  #process.lime-process-v2--active .lime-process-v2__stage:nth-child(4) { animation: limeProcessV2StageFade-4 0.6s ease forwards 1.4s, limeProcessV2Float-4 4s ease-in-out infinite 3.2s, limeProcessV2ActiveScale 8s ease infinite 6.2s; }
  
  /* Update initial states for perspective */
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(1) { transform: translateY(20px) rotateX(1deg) rotateY(1.5deg); }
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(2) { transform: translateY(44px) rotateX(0.5deg) rotateY(0.5deg); }
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(3) { transform: translateY(8px) rotateX(0.5deg) rotateY(-0.5deg); }
  #process:not(.lime-process-v2--active) .lime-process-v2__stage:nth-child(4) { transform: translateY(52px) rotateX(1deg) rotateY(-1.5deg); }
}

@keyframes limeProcessV2Highlight {
  0% { opacity: 0.8; color: #000000; }
  12.5% { opacity: 1; color: #ffffff; }
  25% { opacity: 0.8; color: #000000; }
  100% { opacity: 0.8; color: #000000; }
}

@keyframes limeProcessV2SymbolHighlight {
  0% { opacity: 0.8; stroke: #000000; }
  12.5% { opacity: 1; stroke: #ffffff; }
  25% { opacity: 0.8; stroke: #000000; }
  100% { opacity: 0.8; stroke: #000000; }
}

@keyframes limeProcessV2TextHighlight {
  0% { color: #000000; }
  12.5% { color: #ffffff; }
  25% { color: #000000; }
  100% { color: #000000; }
}

@keyframes limeProcessV2AuraHighlight {
  0% { opacity: 0; }
  12.5% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* ====================================================
   RESPONSIVE LAYOUTS
==================================================== */

/* Tablet Portrait & Small Desktop (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  #process .lime-process-v2__stages {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  
  #process .lime-process-v2__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  #process .lime-process-v2__header-left {
    max-width: 100%;
  }

  #process .lime-process-v2__path-svg {
    display: none; /* Simplify flow line for 2x2 grid */
  }
}

/* Mobile (<= 767px) */
@media (max-width: 767px) {
  #process .lime-process-v2__stages {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  #process .lime-process-v2__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
  }
  
  #process .lime-process-v2__header-left {
    max-width: 100%;
  }
  
  #process .lime-process-v2__header-right {
    display: none;
  }

  #process .lime-process-v2__path-svg {
    display: none; /* Hide complex path on mobile */
  }
  
  #process .lime-process-v2__stage {
    padding: 24px 20px;
  }
  
  /* Mobile simplified vertical flow connector */
  #process .lime-process-v2__stage:not(:last-child) .lime-process-v2__stage-desc::after {
    content: '';
    position: absolute;
    top: calc(100% + 24px);
    left: 20px;
    width: 2px;
    height: 24px;
    background: linear-gradient(to bottom, rgba(138, 232, 28, 0.4), transparent);
  }
}

/* ====================================================
   REDUCED MOTION
==================================================== */
@media (prefers-reduced-motion: reduce) {
  #process .lime-process-v2__stage,
  #process .lime-process-v2__path-line,
  #process .lime-process-v2__path-glow,
  #process .lime-process-v2__number,
  #process .lime-process-v2__symbol {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  #process .lime-process-v2__number {
    color: var(--neutral-charcoal) !important;
    opacity: 0.4 !important;
  }
  
  #process .lime-process-v2__symbol {
    stroke: var(--lime-primary) !important;
    opacity: 0.85 !important;
  }
  
  #process .lime-process-v2__path-line,
  #process .lime-process-v2__path-glow {
    stroke-dashoffset: 0 !important;
  }
}