/* === KBL Back Office Overrides — Pillar Titles Visibility === */
.pillar__media{position:relative;overflow:hidden}
.pillar__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,10,0.15) 0%,
    rgba(10,10,10,0.35) 35%,
    rgba(10,10,10,0.75) 75%,
    rgba(10,10,10,0.92) 100%);
  pointer-events:none;
  z-index:1;
}
.pillar__head{
  z-index:2;
  text-shadow:0 2px 16px rgba(0,0,0,0.55);
}
.pillar__head .eyebrow,
.pillar__head [class*=eyebrow],
.pillar__head [class*=label]{
  color:#c4a46c !important;
  letter-spacing:4px !important;
  font-weight:500 !important;
  opacity:1 !important;
}
.pillar__head h3{
  color:#fff !important;
  font-weight:500 !important;
  text-shadow:0 3px 22px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5) !important;
}
.pillar__head p{
  color:rgba(255,255,255,0.92) !important;
  text-shadow:0 2px 10px rgba(0,0,0,0.6) !important;
}

/* === Button hover text visibility fix === */
/* The .btn--glass and .nav__cta buttons animate a gold pseudo-element fill on hover.
   Since the button text is a raw text node (not wrapped in <span>), it ends up behind the fill.
   Fix: push the pseudo-element to z-index -1, make button create an isolated stacking context. */
a.btn--glass,
a.nav__cta,
.btn--glass,
.nav__cta{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden;
}
.btn--glass::after,
.btn--glass:hover::after,
.nav__cta::before,
.nav__cta:hover::before{
  z-index:-1 !important;
}
.btn--glass:hover,
.nav__cta:hover{
  color:#0a0a0a !important;
}