/* ==========================================================================
   Internal Page Hero — concise cover for expertise / thought-leadership /
   about / contact. Lighter than the homepage hero: no video-scale height,
   same blueprint + gradient language.
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--space-3xl) + var(--space-lg));
  padding-bottom: var(--space-2xl);
  background:
    radial-gradient(circle at 85% 10%, rgba(0, 87, 217, 0.24), transparent 46%),
    radial-gradient(circle at 10% 90%, rgba(0, 245, 160, 0.12), transparent 50%),
    linear-gradient(180deg, var(--color-navy-950) 0%, var(--color-navy-900) 100%);
  border-bottom: 1px solid var(--border-subtle);
}

/* Optional atmospheric video layer (opt-in per page-hero — currently
   Expertise and About). Sits between the section's own background and
   the blueprint grid, so the grid stays crisp on top and the video reads
   as a moving texture inside the dark blue environment rather than a
   banner. Populated by initHeroVideo() in js/main.js, which skips it
   entirely on small viewports and under prefers-reduced-motion. */
.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  filter: saturate(0.8) contrast(1.05);
  pointer-events: none;
}

/* Static equivalent of .page-hero__video above (currently Thought
   Leadership) — same positioning/treatment, just no playback wiring. */
.page-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  filter: saturate(0.8) contrast(1.05);
  pointer-events: none;
}

.page-hero__video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(0, 87, 217, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(6, 15, 34, 0.3) 0%, rgba(6, 15, 34, 0.48) 55%, var(--color-navy-950) 100%);
  pointer-events: none;
}

.page-hero__grid {
  position: absolute;
  inset: -10% -10%;
  background-image: url('../images/blueprint-grid.svg');
  background-size: 96px 96px;
  opacity: 0.22;
}

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

.page-hero__eyebrow {
  margin-bottom: var(--space-md);
}

.page-hero__title {
  font-size: var(--text-h1);
  max-width: 22ch;
  text-align: left;
}

.page-hero__title em {
  font-style: normal;
  color: var(--accent);
}

.page-hero__lead {
  margin-top: var(--space-md);
  font-size: var(--text-lead);
  font-weight: 500;
  color: var(--text-muted);
  max-width: 52ch;
}

.page-hero__meta {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-hero__meta strong {
  color: var(--accent);
  font-weight: 600;
}

/* ---- Two-column hero split — used wherever a page-hero pairs its
   headline copy with a services graphic (currently the Expertise page's
   Core Services stack). Shared here (rather than in a per-page stylesheet)
   so any page-hero can opt in with the same markup pattern. ---- */
.page-hero__split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-2xl);
  align-items: center;
}

.page-hero__split .page-hero__inner {
  max-width: none;
}

.services-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}

.services-stack__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2xs);
}

.services-stack__item {
  width: fit-content;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.services-stack__item--1 { color: var(--color-silver); border-color: rgba(200, 205, 214, 0.45); }
.services-stack__item--2 { color: var(--color-blue); border-color: rgba(0, 87, 217, 0.5); }
.services-stack__item--3 { color: #4d9bff; border-color: rgba(77, 155, 255, 0.5); }
.services-stack__item--4 { color: #9fc2ff; border-color: rgba(159, 194, 255, 0.45); }
.services-stack__item--5 { color: #7fa8d9; border-color: rgba(127, 168, 217, 0.5); }
.services-stack__item--6 { color: var(--accent); border-color: rgba(0, 245, 160, 0.5); }

.services-stack__item--1:hover { border-color: rgba(200, 205, 214, 0.85); background: rgba(200, 205, 214, 0.06); box-shadow: 0 0 22px rgba(200, 205, 214, 0.14); }
.services-stack__item--2:hover { border-color: rgba(0, 87, 217, 0.9); background: rgba(0, 87, 217, 0.08); box-shadow: 0 0 22px rgba(0, 87, 217, 0.22); }
.services-stack__item--3:hover { border-color: rgba(77, 155, 255, 0.9); background: rgba(77, 155, 255, 0.08); box-shadow: 0 0 22px rgba(77, 155, 255, 0.22); }
.services-stack__item--4:hover { border-color: rgba(159, 194, 255, 0.85); background: rgba(159, 194, 255, 0.08); box-shadow: 0 0 22px rgba(159, 194, 255, 0.18); }
.services-stack__item--5:hover { border-color: rgba(127, 168, 217, 0.9); background: rgba(127, 168, 217, 0.08); box-shadow: 0 0 22px rgba(127, 168, 217, 0.2); }
.services-stack__item--6:hover { border-color: rgba(0, 245, 160, 0.9); background: rgba(0, 245, 160, 0.08); box-shadow: 0 0 22px rgba(0, 245, 160, 0.22); }

@media (max-width: 900px) {
  .page-hero__split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .services-stack {
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .page-hero {
    padding-top: calc(var(--space-2xl) + var(--space-lg));
  }
}