/* Controlled brand palette: one primary green, with intentional category shades. */
:root {
  --brand-green-main: #22c55e;
  --brand-green-soft: #86efac;
  --brand-green-muted: #4d8f68;
  --brand-green-deep: #0e3b24;
  --brand-green-ink: #031508;
  --brand-green-line: rgba(77, 143, 104, .32);
  --brand-green-glow: rgba(34, 197, 94, .18);
}

body {
  --accent: var(--brand-green-main);
  --accent-dark: var(--brand-green-deep);
  --accent-soft: var(--brand-green-glow);
}

/* Calls to action stay recognisable everywhere. */
.button-primary,
.mobile-contact a:first-child {
  background: linear-gradient(135deg, var(--brand-green-main), #34d399);
  color: var(--brand-green-ink);
}

.button-primary:hover,
.button-primary:focus-visible,
.mobile-contact a:first-child:hover,
.mobile-contact a:first-child:focus-visible {
  background: linear-gradient(135deg, var(--brand-green-soft), var(--brand-green-main));
  color: #021006;
}

.brand-mark {
  background: linear-gradient(135deg, #152a1c, var(--brand-green-muted));
  border-color: rgba(134, 239, 172, .2);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline-color: var(--brand-green-soft);
}

.skip-link {
  background: var(--brand-green-main);
  color: var(--brand-green-ink);
}

.mobile-contact a {
  border-color: var(--brand-green-muted);
}

/* The three service pages share the brand but each gets a quiet signature shade. */
.service-electro {
  --page-accent: #22c55e;
  --page-accent-soft: #86efac;
}

.service-water {
  --page-accent: #4ade80;
  --page-accent-soft: #a7f3d0;
}

.service-climate {
  --page-accent: #67e8a1;
  --page-accent-soft: #bbf7d0;
}

.service-page .eyebrow,
.service-page .text-link {
  color: var(--page-accent-soft, var(--brand-green-soft));
}

.service-page .service-proof .eyebrow {
  color: var(--page-accent, var(--brand-green-main));
}

.service-page .service-proof .before-after-card {
  border-color: color-mix(in srgb, var(--page-accent, var(--brand-green-main)) 34%, transparent);
}

/* Home: brighter text accents, muted dividers and a deeper CTA finish. */
.home-cinematic {
  --story-green: var(--brand-green-main);
  --story-green-bright: var(--brand-green-soft);
  --story-green-muted: var(--brand-green-muted);
  --story-green-deep: var(--brand-green-deep);
  --story-line: var(--brand-green-line);
}

.home-cinematic .electro-kicker,
.home-cinematic .cine-kicker,
.home-cinematic .as-wordmark strong,
.home-cinematic .process-list span {
  color: var(--story-green-bright);
}

.home-cinematic .story-skip,
.home-cinematic .contact-reassurance li {
  border-color: var(--story-green-muted);
}

.home-cinematic .cine-link {
  border-bottom-color: var(--story-green-muted);
}

.home-cinematic .cine-link span,
.home-cinematic .testimonial-grid footer {
  color: var(--story-green-bright);
}

.home-cinematic .floating-cta {
  background: linear-gradient(135deg, var(--story-green), var(--story-green-muted));
}

/* Services overview: the index and cards use three related greens instead of one flat accent. */
.services-page {
  --services-line: var(--brand-green-line);
}

.services-page .services-hero-index a span,
.services-page .services-hero-index a b {
  color: var(--brand-green-soft);
}

.services-page .service-overview-card:nth-child(1) { --card-accent: var(--brand-green-main); }
.services-page .service-overview-card:nth-child(2) { --card-accent: #4ade80; }
.services-page .service-overview-card:nth-child(3) { --card-accent: #86efac; }

.services-page .service-overview-number,
.services-page .service-overview-link b {
  color: var(--card-accent, var(--brand-green-main));
}

.services-page .service-overview-link {
  border-bottom-color: var(--card-accent, var(--brand-green-main));
}

.services-page .service-overview-card::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--brand-green-main)) 8%, transparent), transparent 58%);
}