/* ============================================================
   PRIVY CONSUL — HERO THEATRE (shared page-hero treatment)
   Mirrors the who-we-serve.html hero: full-bleed grayscale
   imagery, gold radial glow, floating crest, centered stack,
   chevron regalia divider. Applied by hero-theatre.js, which
   adds the .ht class + injects .ht-bg, crest, and regalia.
   ============================================================ */

.phero.ht{position:relative;padding:calc(var(--nav-h) + 8rem) 0 6rem;overflow:hidden;isolation:isolate;border-bottom:0}
.phero.ht .ht-bg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;filter:grayscale(1) brightness(.32) contrast(1.08)}
.phero.ht::before{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(80% 100% at 50% 0%,rgba(185,151,91,.14),transparent 62%),
  linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,.25) 45%,var(--ink) 100%)}
.phero.ht .wrap{text-align:center}
.phero.ht .breadcrumb{justify-content:center}
.phero.ht .ht-crest{width:64px;height:64px;margin:0 auto 2rem;display:block;color:var(--gold);animation:htCrestFloat 6s ease-in-out infinite}
@keyframes htCrestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.phero.ht .eyebrow{justify-content:center}
.phero.ht .eyebrow::after{content:'';width:42px;height:1px;background:var(--gold)}
.phero.ht h1{margin-inline:auto;max-width:22ch}
.phero.ht .lede{margin-left:auto;margin-right:auto}
.phero.ht .ht-regalia{display:flex;align-items:center;justify-content:center;gap:1.2rem;color:var(--gold);margin-top:3.2rem}
.phero.ht .ht-regalia .rule{flex:0 1 120px;height:1px;background:linear-gradient(90deg,transparent,rgba(185,151,91,.55))}
.phero.ht .ht-regalia .rule.r{background:linear-gradient(90deg,rgba(185,151,91,.55),transparent)}
.phero.ht .ht-regalia svg{flex-shrink:0;opacity:.9}
@media(prefers-reduced-motion:reduce){.phero.ht .ht-crest{animation:none}}