/* ─────────────────────────────────────────────
   INNER PAGES · shared patterns
   X3D Studio — Technical Control Surface
   ───────────────────────────────────────────── */

/* ── PAGE HERO — shorter, image-backed ──────── */

.page-hero {
  position: relative;
  height: 56vh;
  min-height: 380px;
  max-height: 580px;
  overflow: hidden;
  background: var(--bg-recessed);
}

.page-hero__media {
  position: absolute;
  inset: 0;
}

.page-hero__media img,
.page-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17, 18, 20, 0.4) 0%,
    rgba(17, 18, 20, 0.1) 30%,
    rgba(17, 18, 20, 0.5) 70%,
    rgba(17, 18, 20, 1) 100%
  );
  z-index: 2;
}

.page-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) var(--s-7);
}

.page-hero__ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  display: block;
}

.page-hero__title {
  font-family: var(--font-serif);
  font-size: var(--t-display-lg);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
}

.page-hero__sub {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--s-4);
}

.page-hero__hud {
  position: absolute;
  top: var(--s-9);
  right: var(--page-pad);
  z-index: 3;
  text-align: right;
}

.page-hero__hud-line {
  font-family: var(--font-mono-data);
  font-size: 11px;
  color: rgba(232,234,237,0.25);
  letter-spacing: var(--tracking-mono);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .page-hero {
    height: 45vh;
    min-height: 300px;
  }
  .page-hero__content { padding: 0 var(--s-4) var(--s-5); }
  .page-hero__title { font-size: var(--t-display-md); }
  .page-hero__sub { font-size: 12px; }
  .page-hero__hud { display: none; }
}

/* ── OPENING STATEMENT ──────────────────────── */

.page-opening {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--s-6) var(--page-pad) var(--s-6);
}

.page-opening__text {
  font-family: var(--font-serif);
  font-size: var(--t-display-sm);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: var(--tracking-display);
  color: var(--text);
}

@media (max-width: 768px) {
  .page-opening { padding: var(--s-5) var(--s-4) var(--s-5); }
  .page-opening__text { font-size: var(--t-title-lg); }
}

/* ── PAGE CTA ───────────────────────────────── */

.page-cta {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-9) var(--page-pad);
  text-align: center;
}

.page-cta__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  display: block;
}

.page-cta .btn {
  margin: 0 auto;
}

@media (max-width: 768px) {
  .page-cta { padding: var(--s-7) var(--s-4); }
}