/* Shared, scoped presentation for the 2026 service-page refresh. */
.service-page { padding-bottom: var(--space-16); overflow-x: clip; }
.service-page .container { max-width: var(--content-default); }

.service-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.service-page .service-breadcrumb a:not(.btn-primary) { color: var(--color-text-muted); text-decoration: none; }
.service-page .service-breadcrumb a:not(.btn-primary):hover { color: var(--color-primary); }

/* Full-width reference treatment while the readable content remains constrained. */
.service-hero { position: relative; isolation: isolate; padding: clamp(1.5rem, 4vw, 2rem) 0 1.75rem; text-align: center; }
.service-hero::before { content: ''; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); }
[data-theme="light"] .service-hero { color: var(--color-text); }
[data-theme="light"] .service-hero::before { background: linear-gradient(160deg, #e8f5e9 0%, #f0faf0 60%, #ffffff 100%); }
[data-theme="dark"] .service-hero { color: #ffffff; }
[data-theme="dark"] .service-hero::before { background: linear-gradient(160deg, #0a1f14 0%, #0d1a2e 60%, #111827 100%); }
.service-eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .035em;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-highlight);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.service-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: var(--text-2xl);
  line-height: 1.15;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
@media (max-width: 1024px) {
  .service-page h1 { font-size: clamp(1.75rem, 1rem + 3vw, 2.5rem); }
}
.service-lead { font-size: var(--text-base); line-height: 1.65; max-width: 60ch; margin-inline: auto; }
.service-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-6); margin: var(--space-6) 0 0; }
.service-page .btn-primary { white-space: normal; text-align: center; line-height: 1.4; min-height: 48px; padding: var(--space-3) var(--space-5); }
.service-page a:not(.btn-primary) { color: var(--color-primary); text-decoration: underline; text-underline-offset: .2em; }
.service-page a:not(.btn-primary):hover { color: var(--color-primary-hover); }
.service-page a { transition-property: background-color, border-color, transform, box-shadow; }
.service-qualification { max-width: 60ch; margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .875rem; line-height: 1.6; }

/* Sections alternate as full-width bands, matching the Carbon Footprint reference. */
.service-section { position: relative; isolation: isolate; padding: clamp(var(--space-8), 5vw, var(--space-12)) 0; scroll-margin-top: 10rem; }
.service-section:nth-of-type(odd)::before { content: ''; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--color-surface-2); }
.service-section h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-xl); margin-bottom: var(--space-5); line-height: 1.3; }
.service-section h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 .6rem; line-height: 1.4; }
.service-section p { margin: 0 0 1rem; line-height: 1.7; max-width: 75ch; }
.service-section p:last-child { margin-bottom: 0; }

.service-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.service-deliverables article { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); min-width: 0; }
.service-deliverables article p { color: var(--color-text-muted); font-size: 1rem; max-width: none; }

.service-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding-left: var(--space-6); }
.service-process li { padding-left: .25rem; }
.service-process li::marker, .service-scope-list li::marker { color: var(--color-primary); font-weight: 700; }
.service-process p { font-size: 1rem; color: var(--color-text-muted); max-width: none; }
.service-scope-list { padding-left: var(--space-6); max-width: 78ch; }
.service-scope-list li { padding: .4rem 0 .8rem .5rem; }

/* Details / summary — consistent with the site's expandable content */
.service-section details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-top: var(--space-4); max-width: 85ch; overflow: hidden; }
.service-section summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
  padding: var(--space-4) var(--space-5);
}
.service-section summary::-webkit-details-marker { display: none; }
.service-section summary::after { content: '+'; flex-shrink: 0; color: var(--color-primary); font-weight: 700; }
.service-section details[open] summary::after { content: '\2212'; }
.service-section summary:hover { background: var(--color-surface-2); }
.service-section details > div { padding: 0 var(--space-5) var(--space-5); }

.service-reading { margin-top: var(--space-4) !important; font-size: .925rem; color: var(--color-text-muted); }
.service-content-meta { margin-top: var(--space-5) !important; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Comparison table */
.service-comparison { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; overflow-x: auto; }
.service-comparison table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.service-comparison caption { text-align: left; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.service-comparison th, .service-comparison td { padding: var(--space-4); border: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.service-comparison th { background: var(--color-surface-2); }

.service-page #next-step { color: #ffffff; text-align: center; padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.service-page #next-step::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #1a2332; /* fixed dark navy, matches .cta-section, never theme-dependent */
}
.service-page #next-step h2,
.service-page #next-step p { color: #ffffff; margin-inline: auto; }
.service-page #next-step a:not(.btn-primary) { color: #ffffff; }
.service-page #next-step .service-content-meta { border-top-color: rgba(255, 255, 255, .28); }

.service-page .service-hub-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-6); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.service-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.service-hub-card h3 a { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.service-hub-card .service-option { font-size: .925rem; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

.service-page :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.service-skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 10000; padding: .75rem 1rem; background: var(--color-surface); color: var(--color-text); transform: translateY(-200%); }
.service-skip-link:focus { transform: translateY(0); }

@media (max-width: 900px) {
  .service-process { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 640px) {
  .service-deliverables, .service-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .service-section { padding: var(--space-6) 0; }
  .service-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .service-page .btn-primary { width: 100%; }
  .service-actions a:not(.btn-primary) { text-align: center; }
  .service-comparison th, .service-comparison td { padding: .65rem; font-size: .9rem; }
}