.aa-ph {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: calc(var(--aa-nav-h, 88px) + 90px); padding-bottom: 70px;
  border-bottom: 1px solid var(--color-border);
  background: radial-gradient(ellipse at 85% 30%, rgba(7, 45, 84, .28), transparent 45%), var(--color-bg);
}
.aa-ph::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(133, 177, 219, .17) .65px, transparent .65px);
  background-size: 28px 28px; opacity: .13;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
}
.aa-ph__eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
  color: var(--color-accent); font-size: 10px; letter-spacing: 2.3px; text-transform: uppercase;
}
.aa-ph__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent-glow); }
.aa-ph__title {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px); line-height: 1;
  letter-spacing: -.05em; font-weight: 300; text-transform: uppercase; color: var(--color-fg); max-width: 820px;
}
.aa-ph__tagline { margin-top: 24px; max-width: 560px; color: var(--color-fg-muted); font-size: 16px; line-height: 1.6; }
.aa-ph__meta { margin-top: 28px; color: var(--color-dim); font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 640px) { .aa-ph { padding-top: calc(var(--aa-nav-h, 74px) + 60px); padding-bottom: 50px; } }

/* Optional background image, darkened (toward the text side) so the text stays
   readable. The button that sets it only shows in the editor. */
.aa-ph__bg { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; }
.aa-ph__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-bg) 0%, rgba(5, 7, 11, .85) 35%, rgba(5, 7, 11, .35) 75%, rgba(5, 7, 11, .2) 100%), linear-gradient(0deg, var(--color-bg) 0%, transparent 35%); }
.aa-ph__bg-btn { display: none; }
body.cms-edit .aa-ph__bg-btn {
  display: inline-flex; position: absolute; right: 24px; bottom: 20px; z-index: 3;
  padding: 8px 12px; font: 12px var(--font-body); cursor: pointer;
  color: var(--color-fg); background: rgba(5, 7, 11, .75);
  border: 1px dashed var(--color-border); border-radius: 4px;
}
.aa-ph:has(.aa-ph__bg) { min-height: 520px; display: flex; align-items: flex-end; }
.aa-ph:has(.aa-ph__bg) > .wrap { width: 100%; }