/* Aligns the two legacy-template service pages (carbon-footprint-analysis,
   sustainability-reporting-support) with the shared /service-pages.css
   presentation. Presentation only: no markup, heading, title or meta changes.
   Scoped to body.service-legacy so no other page is affected. */

/* 1. Eyebrow / badge — match .service-eyebrow, and use theme tokens instead of
      hardcoded rgba() so the pill tracks light and dark like the other pages. */
.service-legacy .hero-badge {
  text-transform: none;
  letter-spacing: 0.035em;
  font-weight: 700;
  margin-bottom: var(--space-4);
  background: var(--color-primary-light);
  border-color: var(--color-primary-highlight);
}

/* 2. Hero lead — .service-lead has full contrast; opacity 0.8 dims it,
      which reads noticeably flatter in dark mode. */
.service-legacy .hero-description {
  opacity: 1;
  color: inherit;
  line-height: 1.65;
  margin-bottom: var(--space-6);
}
.service-legacy .hero-supporting {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* 3. Section band colour — style.css forces a raw #1a2332 on the first section
      in dark mode, which does not match --color-surface-2 (#1c2128) used by
      the service-page bands. Bring it back onto the token. */
[data-theme="dark"] .service-legacy .section:first-of-type,
[data-theme="dark"] .service-legacy .section.alt:first-of-type,
[data-theme="dark"] .service-legacy .section--alt {
  background: var(--color-surface-2);
}
[data-theme="light"] .service-legacy .section--alt {
  background: var(--color-surface-2);
}

/* 4. Section rhythm — .service-section caps at --space-12; legacy .section
      runs to --space-16, which makes these pages visibly looser. */
.service-legacy .section {
  padding: clamp(var(--space-8), 5vw, var(--space-12)) 0;
}
.service-legacy .section-header {
  margin-bottom: var(--space-6);
}
.service-legacy .section-body {
  max-width: 75ch;
}

/* 5. Cards and process steps — service-pages.css uses --color-border and
      --shadow-sm; legacy uses --color-divider and no shadow. */
.service-legacy .benefit-card,
.service-legacy .related-card,
.service-legacy .process-list li {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* 6. Hero geometry — opt-in, for pages whose hero is the standard service
      hero rather than a campaign landing hero. */
.service-legacy--hero .hero {
  padding: clamp(1.5rem, 4vw, 2rem) 0 1.75rem;
}
.service-legacy--hero .hero h1 {
  max-width: 20ch;
  line-height: 1.15;
}
/* Keep the decorative hero glyph inside the now-shorter hero band. */
.service-legacy--hero .hero-icon-float {
  width: clamp(90px, 10vw, 150px);
  height: clamp(90px, 10vw, 150px);
}

/* 7. Closing CTA — same #next-step id and panel treatment as the seven
      service-template pages. .cta-section already pins #1a2332 / #ffffff;
      this only aligns the vertical rhythm and muted meta line. */
.service-legacy #next-step {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.service-legacy #next-step h2,
.service-legacy #next-step p {
  color: #ffffff;
  margin-inline: auto;
}