/* =========================================================================
   Interior page strata: header band, content band, cross-links.
   Follows the homepage rhythm so a service page does not read as an
   afterthought next to the front page.
   ========================================================================= */

/* ---------- Header stratum ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-xl) var(--space-lg);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: 2;
}
.page-hero__content { max-width: 660px; }

.page-hero h1 {
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  margin-bottom: var(--space-md);
}
.page-hero .lede { margin-bottom: var(--space-md); max-width: 54ch; }
.page-hero__actions { margin-top: var(--space-md); }

/* The mark is a quiet structural echo, not a hero image. */
.page-hero__mark {
  justify-self: center;
  width: min(240px, 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  color: var(--accent);
  opacity: 0.9;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(60,181,74,0.10), transparent 70%);
}
.page-hero__mark svg { width: 62%; height: 62%; overflow: visible; }
.page-hero__mark [data-stroke] {
  stroke-dasharray: var(--len, 160);
  stroke-dashoffset: var(--len, 160);
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1);
}
.page-hero__mark.is-in [data-stroke] { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .page-hero__mark [data-stroke] { stroke-dashoffset: 0; transition: none; }
}

/* ---------- Content stratum ---------- */
.page-body { padding-block: var(--space-xl); }

/* Slightly wider than the default measure: these pages are reference reading,
   and the lists need room without running long. */
.prose--wide { max-width: 74ch; }

.prose--wide > h2 {
  position: relative;
  padding-top: var(--space-md);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}
.prose--wide > h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 76px;
  height: 2px;
  background: var(--accent);
}
.prose--wide > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.prose--wide > h2:first-child::before { display: none; }

.prose--wide > h3 {
  margin-top: var(--space-md);
  color: var(--ink);
}
.prose--wide p { color: var(--muted); }
.prose--wide strong { color: var(--ink); }

/* Lists read as spec sheets rather than bullets. */
.prose--wide ul {
  display: grid;
  gap: 12px;
  margin-top: var(--space-sm);
}
.prose--wide li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  line-height: 1.6;
}
.prose--wide li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 11px;
  height: 2px;
  background: var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .page-hero__mark { justify-self: start; width: min(180px, 60%); }
}
@media (max-width: 760px) {
  .page-hero { padding-block: var(--space-lg) var(--space-md); }
  .page-hero__mark { width: 140px; }
  .prose--wide { max-width: none; }
}