/* ==========================================================================
   Page Hero — compact dark banner for inner pages
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-dark);
  padding: 150px 0 76px;
  margin-top: -92px;
}

.page-hero__mesh {
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: .7;
}

.page-hero__inner { position: relative; z-index: 1; }

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-ink-200);
}
.page-hero__breadcrumb a { color: var(--clr-ink-200); transition: color .2s ease; }
.page-hero__breadcrumb a:hover { color: var(--clr-accent-400); }
.page-hero__breadcrumb svg { width: 13px; height: 13px; opacity: .6; }
.page-hero__breadcrumb span:last-child { color: #fff; }

.page-hero__eyebrow { background: rgba(255,255,255,.1); color: var(--clr-accent-400); }

.page-hero__title {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 16px;
}

.page-hero__subtitle {
  margin-top: 16px;
  font-size: 16px;
  color: var(--clr-ink-200);
  max-width: 560px;
  line-height: 1.7;
}