/* Phase 6 — shared editorial and company-page layer */
.content-page {
  background: var(--color-surface);
}

.content-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 88% 22%, rgba(52, 184, 84, 0.16), transparent 32rem),
    linear-gradient(145deg, #fff 25%, #f5fbf6 100%);
}

.content-hero-grid {
  display: grid;
  gap: var(--space-10);
  align-items: end;
}

.content-hero h1 {
  max-width: 58rem;
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5.8rem);
  letter-spacing: var(--tracking-tight);
  line-height: 0.98;
}

.content-hero h1 em {
  color: var(--color-brand-dark);
  font-style: normal;
}

.content-hero-aside {
  max-width: 29rem;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
}

.content-hero-aside p {
  margin: 0;
  color: var(--color-text-muted);
}

.content-hero-aside strong {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-lg);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: 650;
}

.breadcrumb a:hover {
  color: var(--color-brand-dark);
}

.content-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.content-section + .content-section {
  border-top: 1px solid var(--color-border);
}

.content-section-soft {
  background: var(--color-surface-soft);
}

.content-section-dark {
  background: var(--color-ink-strong);
  color: var(--color-surface);
}

.content-section-dark .lead-small,
.content-section-dark .content-intro,
.content-section-dark .content-card p,
.content-section-dark .content-card li {
  color: #bbc2bb;
}

.content-heading {
  display: grid;
  gap: var(--space-6);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.content-heading h2 {
  max-width: 50rem;
  margin: 0;
  font-size: clamp(2.05rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.content-heading > p,
.content-intro {
  max-width: 43rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.content-grid {
  display: grid;
  gap: var(--space-4);
}

.content-grid-2,
.content-grid-3 {
  grid-template-columns: minmax(0, 1fr);
}

.content-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.content-section-dark .content-card {
  border-color: #303430;
  background: #171917;
}

.content-card > span,
.content-number {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--color-brand-dark);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.content-section-dark .content-card > span {
  color: var(--color-brand-bright);
}

.content-card h2,
.content-card h3 {
  margin: 0 0 var(--space-3);
  line-height: 1.12;
}

.content-card h3 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.content-card p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

.content-card ul,
.editorial-body ul,
.editorial-body ol {
  margin: 0;
  padding-left: 1.15rem;
}

.content-card li + li,
.editorial-body li + li {
  margin-top: var(--space-2);
}

.content-card .text-link {
  margin-top: auto;
}

.content-card .text-link::after {
  content: " ↗";
}

.content-section-dark .text-link {
  color: var(--color-surface);
}

.service-index-card {
  min-height: 24rem;
}

.service-index-card .service-outcome {
  margin-top: auto;
  padding-top: var(--space-8);
  color: var(--color-ink);
  font-weight: 750;
}

.work-story {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.work-story-copy,
.work-story-flow {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.work-story-copy h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
}

.work-story-copy p {
  color: var(--color-text-muted);
}

.work-story-flow {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-tint);
}

.work-story-flow span {
  padding: var(--space-4);
  border: 1px solid #cfe5d3;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 720;
}

.work-story + .work-story {
  margin-top: var(--space-6);
}

.editorial-layout {
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.editorial-nav {
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.editorial-nav strong {
  display: block;
  margin-bottom: var(--space-4);
}

.editorial-nav a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.editorial-nav a:hover {
  color: var(--color-brand-dark);
}

.editorial-body {
  max-width: 49rem;
}

.editorial-body h2 {
  margin: 3.5rem 0 var(--space-4);
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  line-height: 1.08;
}

.editorial-body h2:first-child {
  margin-top: 0;
}

.editorial-body h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-xl);
}

.editorial-body p,
.editorial-body li {
  color: #4f554f;
  font-size: 1.05rem;
  line-height: 1.75;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: 650;
}

.principle-list {
  border-top: 1px solid var(--color-border);
}

.principle-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.principle-item > span {
  font-size: var(--text-sm);
  font-weight: 850;
}

.principle-item h3,
.principle-item p {
  margin: 0;
}

.principle-item p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.contact-route {
  display: grid;
  gap: var(--space-8);
  padding: clamp(1.75rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background: var(--color-ink-strong);
  color: var(--color-surface);
}

.contact-route h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
}

.contact-route p {
  max-width: 42rem;
  color: #bbc2bb;
}

.contact-route .button {
  border-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-ink);
}

.legal-note {
  padding: var(--space-5);
  border-left: 3px solid var(--color-brand);
  background: var(--color-surface-tint);
  color: var(--color-text-muted);
}

.error-page {
  display: grid;
  min-height: calc(100vh - var(--header-height-mobile));
  place-items: center;
  padding: var(--space-16) 0;
  text-align: center;
}

.error-page h1 {
  margin: 0;
  font-size: clamp(5rem, 20vw, 12rem);
  letter-spacing: -0.08em;
  line-height: 0.8;
}

.error-page h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: clamp(1.8rem, 5vw, 3rem);
}

.error-page p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--color-text-muted);
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

@media (min-width: 43.75rem) {
  .content-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56.25rem) {
  .content-hero-grid,
  .content-heading {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  }

  .content-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-story {
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
  }

  .work-story-flow {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .editorial-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .editorial-nav {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-6));
  }

  .contact-route {
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
    align-items: end;
  }
}