/* Blue stays primary; warm colours are reserved for small supporting details. */
:root {
  --strandit-green: #16837a;
  --strandit-green-tint: #e9f8f4;
  --strandit-red: #bd3545;
  --strandit-red-tint: #fff0f1;
  --strandit-yellow: #8a6500;
  --strandit-yellow-tint: #fff7d6;
  --strandit-green-filter: invert(39%) sepia(31%) saturate(1160%) hue-rotate(125deg);
  --strandit-red-filter: invert(30%) sepia(35%) saturate(2800%) hue-rotate(323deg);
  --strandit-yellow-filter: invert(37%) sepia(85%) saturate(700%) hue-rotate(8deg);
}

#process .proc-step:nth-child(2) {
  --step-color: var(--strandit-green);
  --step-tint: var(--strandit-green-tint);
}

#process .proc-step:nth-child(3) {
  --step-color: var(--strandit-red);
  --step-tint: var(--strandit-red-tint);
}

#process .proc-step:nth-child(4) {
  --step-color: var(--strandit-yellow);
  --step-tint: var(--strandit-yellow-tint);
}

#serviceCatalog .service-offer-card:nth-child(6n + 2) .service-icon,
.quick-grid .quick:nth-child(2) .quick-icon,
.package-grid .package-card:nth-child(2) .package-icon {
  color: var(--strandit-red);
  background: var(--strandit-red-tint);
  border-color: color-mix(in srgb, var(--strandit-red) 20%, white);
}

#serviceCatalog .service-offer-card:nth-child(6n + 3) .service-icon,
.quick-grid .quick:nth-child(3) .quick-icon,
.package-grid .package-card:nth-child(3) .package-icon {
  color: var(--strandit-yellow);
  background: var(--strandit-yellow-tint);
  border-color: color-mix(in srgb, var(--strandit-yellow) 20%, white);
}

.role:nth-child(2) .tags .tag:last-child {
  color: var(--strandit-red);
  background: var(--strandit-red-tint);
  border-color: color-mix(in srgb, var(--strandit-red) 20%, white);
}

.role:nth-child(3) .tags .tag:last-child {
  color: var(--strandit-yellow);
  background: var(--strandit-yellow-tint);
  border-color: color-mix(in srgb, var(--strandit-yellow) 20%, white);
}

#serviceCatalog .service-offer-card:nth-child(6n + 2) .service-icon img {
  filter: var(--strandit-red-filter);
}
#serviceCatalog .service-offer-card:nth-child(6n + 3) .service-icon img {
  filter: var(--strandit-yellow-filter);
}
body .hf-success, body .success-icon { color: var(--strandit-green); }
body .success-icon { background: var(--strandit-green-tint); }
body .hf-error, body .required, body .error { color: var(--strandit-red); }
body .error, body .form-error-message {
  background: var(--strandit-red-tint);
  border-color: color-mix(in srgb, var(--strandit-red) 25%, transparent);
}

/* Supporting accents stay on small details, not primary actions or client artwork. */
#work .project-feature-label { border-left: 3px solid var(--strandit-green); padding-left: 9px; }
#work .project-scope li:nth-child(3n + 1)::before { background: var(--strandit-green); }
#work .project-scope li:nth-child(3n + 2)::before { background: var(--strandit-red); }
#work .project-scope li:nth-child(3n)::before { background: var(--strandit-yellow); }
#work .project-enquiry > img { filter: var(--strandit-green-filter); }

#about .ab-val:nth-child(1), #contact .c-detail:nth-child(1) { --detail-color: var(--strandit-green); --detail-tint: var(--strandit-green-tint); }
#about .ab-val:nth-child(2), #contact .c-detail:nth-child(2) { --detail-color: var(--strandit-red); --detail-tint: var(--strandit-red-tint); }
#about .ab-val:nth-child(3), #contact .c-detail:nth-child(3) { --detail-color: var(--strandit-yellow); --detail-tint: var(--strandit-yellow-tint); }
#about .ab-icon, #contact .c-icon { background: var(--detail-tint); border-color: color-mix(in srgb, var(--detail-color) 20%, white); }
#about .ab-icon svg, #contact .c-icon svg { stroke: var(--detail-color); }

#serviceCatalog .service-offer-card:nth-child(6n + 4) .service-icon,
.quick-grid .quick:nth-child(4) .quick-icon,
.package-grid .package-card:first-child .package-icon {
  color: var(--strandit-green); background: var(--strandit-green-tint);
  border-color: color-mix(in srgb, var(--strandit-green) 20%, white);
}
#serviceCatalog .service-offer-card:nth-child(6n + 4) .service-icon img { filter: var(--strandit-green-filter); }

#testimonials .testi-card:nth-child(3n + 1) .quote-mark { color: color-mix(in srgb, var(--strandit-green) 30%, white); }
#testimonials .testi-card:nth-child(3n + 2) .quote-mark { color: color-mix(in srgb, var(--strandit-red) 30%, white); }
#testimonials .testi-card:nth-child(3n) .quote-mark { color: color-mix(in srgb, var(--strandit-yellow) 30%, white); }

.service-copy li:nth-child(3n + 1)::marker, .article-body li:nth-child(3n + 1)::marker, .package-card li:nth-child(3n + 1)::marker { color: var(--strandit-green); }
.service-copy li:nth-child(3n + 2)::marker, .article-body li:nth-child(3n + 2)::marker, .package-card li:nth-child(3n + 2)::marker { color: var(--strandit-red); }
.service-copy li:nth-child(3n)::marker, .article-body li:nth-child(3n)::marker, .package-card li:nth-child(3n)::marker { color: var(--strandit-yellow); }
.role:first-child .tags .tag:last-child { color: var(--strandit-green); background: var(--strandit-green-tint); border-color: color-mix(in srgb, var(--strandit-green) 20%, white); }