/*
  Two-tone visual system
  ----------------------
  Section surfaces are limited to a warm grey-white and a near-black surface
  with a restrained green glow. #B1E80E is the only brand-green accent.
  This file contains visual overrides only; no behaviour is changed.
*/

:root {
  --signal: #b1e80e;
  --signal-strong: #b1e80e;
  --site-refine-green: #b1e80e;
  --accent: #b1e80e;
  --two-tone-accent: #b1e80e;
  --two-tone-light: #f5f6f1;
  --two-tone-dark: #0c0f0d;
  --surface-soft: #f5f6f1;
  --site-refine-soft-green: #f5f6f1;
  --site-refine-pale: #f5f6f1;
  --refine-soft-green: #f5f6f1;
  --refine-pale: #f5f6f1;
}

body,
body.homepage,
body:not(.homepage),
.service-page-main,
.legal-page-main,
.problem-guide-page,
.problem-guide-page main {
  background-color: var(--two-tone-light);
  background-image: none;
}

/* One consistent light section surface. */
.homepage #hero,
.homepage .credibility-anchor-section,
.homepage #services,
.homepage #solutions,
.homepage #proof-of-work,
.homepage #questions,
.homepage #contact,
.service-page-hero,
.service-scope-overview,
.service-detail-section,
.service-detail-section.alt,
.service-process-section,
.related-problems-section,
.problem-guide-page .problem-guide-hero,
.problem-search-section,
.problem-guide-intro,
.problem-category,
.problem-category:nth-of-type(even),
.problem-guide-references,
.legal-page-hero,
.legal-page-content {
  background-color: var(--two-tone-light);
  background-image: none;
}

/* The second section surface: near-black with a quiet brand-colour glow. */
.homepage #who-we-help,
.homepage #confidentiality,
.service-cta,
.problem-guide-decision,
.site-footer {
  background-color: var(--two-tone-dark);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(177,232,14,.085), transparent 34%),
    linear-gradient(132deg, rgba(177,232,14,.035), transparent 44%);
}

/* Remove former pale-green panels while retaining calm white cards. */
.homepage .connected-combine-offer,
.homepage .solution-path-card,
.homepage .faq-item,
.homepage #contact .contact-form,
.service-page-hero-graphic,
.service-page-hero-aside-dark .service-page-hero-graphic,
.service-scope-item,
.service-offer-visual,
.service-offer-columns > div,
.service-detail-section.alt .service-offer-columns > div,
.service-example,
.service-scope-note,
.service-combine-note,
.service-detail-section.alt .service-scope-note,
.process-card,
.related-service,
.process-card:nth-child(2),
.process-card:nth-child(3),
.related-service:nth-child(even),
.related-problem-card,
.problem-guide-page .problem-guide-visual,
.problem-guide-note,
.problem-category-graphic,
.problem-card,
.problem-category:nth-of-type(even) .problem-card,
.problem-reference-grid a,
.legal-summary,
.legal-address,
.legal-table tbody th {
  background-color: rgba(255,255,255,.82);
  background-image: none;
}

.homepage .deliverable-entry,
.homepage .solution-path-card,
.homepage .faq-item,
.service-scope-item,
.related-problem-card,
.problem-card {
  border: 1px solid rgba(12,15,13,.075);
}

.homepage .deliverable-entry:hover,
.homepage .solution-path-card:hover,
.homepage .faq-item:hover,
.homepage .faq-item[open],
.service-scope-item:hover,
.related-problem-card:hover,
.problem-card:hover {
  background-color: #fff;
}

/* Keep accents crisp and limited to the single premium green. */
::selection,
.homepage .deliverable-stage-label > span,
.homepage .deliverable-badge,
.service-page-summary,
.service-detail-copy > .mini-label,
.service-offer-visual .comparison-step,
.process-card .mini-label,
.related-service .mini-label,
.problem-number,
.legal-table thead th {
  background-color: var(--two-tone-accent);
}

.homepage .deliverable-entry .deliverable-title a::after,
.homepage .proof-story-index,
.service-scope-item span,
.service-offer-price span,
.related-problem-card span,
.legal-updated {
  color: var(--two-tone-dark) !important;
}

.detail-list li::before,
.service-mini-list li::before,
.conf-list li::before,
.homepage .combined-service-offer-copy li::before {
  color: var(--two-tone-accent);
}

.section-heading .process-support-highlight,
.ppwr-service-tag,
.service-page-summary p {
  color: var(--two-tone-dark);
}

.section-heading .process-support-highlight {
  border-color: var(--two-tone-accent);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--two-tone-accent);
}

.form-status.is-success {
  border-color: var(--two-tone-accent);
  background-color: rgba(177,232,14,.14);
}

.cookie-switch input:checked + span {
  border-color: var(--two-tone-accent);
  background-color: var(--two-tone-accent);
}

.hero-visual-refined .proof-key-crease {
  border-color: var(--two-tone-accent);
}

.hero-visual-refined .proof-key-bleed {
  background-color: var(--two-tone-light);
}

/* Stronger, more legible deliverable names. */
.homepage .deliverable-entry .deliverable-title {
  margin: 0 0 10px;
  font-size: clamp(25px,2.35vw,34px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.homepage .deliverable-entry .deliverable-title a {
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.service-detail-grid h2,
.service-offer-layout .service-detail-copy > h2 {
  font-weight: 750;
}

/* Dark-section contrast and restrained accent actions. */
.service-cta h2,
.service-cta p,
.service-cta .service-cta-inner,
.problem-guide-decision h2,
.problem-guide-decision p {
  color: #f7f8f3;
}

.service-cta .button,
.problem-guide-decision .button {
  border-color: var(--two-tone-accent);
  background-color: var(--two-tone-accent);
  color: var(--two-tone-dark);
}

.service-cta .button:hover,
.service-cta .button:focus-visible,
.problem-guide-decision .button:hover,
.problem-guide-decision .button:focus-visible {
  background-color: var(--two-tone-accent);
  color: var(--two-tone-dark);
}

/* Neutralise remaining green-wash effects inherited from earlier themes. */
.homepage #hero::before,
.homepage #solutions::before,
.service-page-hero::before,
.service-page-hero::after,
.problem-guide-page .problem-guide-hero::before,
.legal-page-hero::before {
  background: none;
}

.homepage .comparison-table thead th,
.homepage .comparison-table tbody td,
.homepage .comparison-table tbody th,
.homepage .comparison-table tfoot th,
.homepage .comparison-table tfoot td {
  background-color: rgba(255,255,255,.78);
}

.homepage .comparison-table tbody tr:hover td,
.homepage .comparison-table tbody tr:hover th {
  background-color: #fff;
}

@media (max-width: 760px) {
  .homepage .deliverable-entry .deliverable-title {
    font-size: clamp(23px,6.7vw,29px);
    line-height: 1.08;
  }
}