:root {
  --engagement-gold: #d99a2b;
  --engagement-gold-soft: rgba(217, 154, 43, 0.34);
  --engagement-ink: #050505;
  --engagement-text: #f3efe7;
  --engagement-muted: #aaa49b;
}

.hero-values.engagements-premium {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  display: block;
  width: 100%;
  min-height: 820px;
  padding: 92px clamp(24px, 4.5vw, 86px) 112px;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(217, 154, 43, 0.22);
  border-bottom: 1px solid rgba(217, 154, 43, 0.18);
  background: #050505;
}

.hero-values.engagements-premium::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -2;
  background:
    linear-gradient(rgba(217, 154, 43, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 154, 43, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
}

.hero-values.engagements-premium::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 18%;
  bottom: 8%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(174, 105, 22, 0.18), transparent 68%);
  transform: translate3d(calc(var(--parallax-x) * .55), calc(var(--parallax-y) * .55), 0);
  pointer-events: none;
}

.engagements-premium__inner {
  width: min(1540px, 100%);
  margin: 0 auto;
}

.engagements-premium__intro {
  max-width: 1260px;
  margin-bottom: 54px;
}

.engagements-premium__eyebrow {
  margin: 0 0 48px;
  color: #dda33c;
  font: 500 14px/1.2 var(--font-text, Arial, sans-serif);
  letter-spacing: 0;
  text-transform: uppercase;
}

.engagements-premium__eyebrow::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 20px;
  background: var(--engagement-gold);
  box-shadow: 0 0 12px rgba(255, 185, 60, 0.7);
}

.engagements-premium__title {
  max-width: 1280px;
  margin: 0;
  color: var(--engagement-text);
  font-family: var(--font-title, Arial, sans-serif);
  font-size: clamp(46px, 5.2vw, 86px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
}

.engagements-premium__lead {
  max-width: 850px;
  margin: 28px 0 0;
  color: var(--engagement-muted);
  font: 400 17px/1.55 var(--font-text, Arial, sans-serif);
  letter-spacing: 0;
}

.engagements-premium__lead strong { color: #e2aa42; font-weight: 500; }

.engagements-premium__beam {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0 0 34px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, rgba(217, 154, 43, .42) 8%, rgba(217, 154, 43, .42) 92%, transparent);
}

.engagements-premium__beam::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -18%;
  width: 150px;
  height: 5px;
  opacity: 0;
  background: radial-gradient(ellipse, #fff 0, #ffd37b 16%, rgba(235, 161, 43, .72) 38%, transparent 72%);
  filter: blur(.2px);
}

.engagements-premium__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.engagements-premium__card {
  --card-delay: 0ms;
  position: relative;
  min-width: 0;
  min-height: 360px;
  padding: 34px 26px 30px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(217, 154, 43, .5) !important;
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background: linear-gradient(145deg, rgba(28, 20, 10, .78), rgba(4, 4, 4, .95) 54%) !important;
  box-shadow: inset 0 0 44px rgba(198, 125, 27, .035);
  transition: transform 520ms cubic-bezier(.2,.75,.2,1), border-color 420ms ease, box-shadow 420ms ease;
}

.engagements-premium__card::before {
  content: attr(data-engagement-number);
  position: absolute;
  top: 22px;
  left: 22px;
  color: #e2a63b;
  font: 600 13px/1 var(--font-text, Arial, sans-serif);
}

.engagements-premium__card::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -70%;
  width: 42%;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 209, 124, .16), transparent);
  pointer-events: none;
}

.engagements-premium__card:hover {
  transform: translateY(-8px);
  border-color: rgba(237, 173, 59, .88) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 0 38px rgba(218, 146, 37, .08);
}

.engagements-premium__card:hover::after {
  opacity: 1;
  animation: engagements-card-sweep 1100ms cubic-bezier(.2,.7,.2,1) both;
}

.engagements-premium__card img,
.engagements-premium__card svg,
.engagements-premium__card .value-icon,
.engagements-premium__card [class*="icon"] {
  position: relative;
  z-index: 1;
  max-width: 116px;
  max-height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(236, 165, 48, .42));
  transition: filter 420ms ease, transform 420ms ease;
}

.engagements-premium__card:hover img,
.engagements-premium__card:hover svg,
.engagements-premium__card:hover .value-icon,
.engagements-premium__card:hover [class*="icon"] {
  transform: scale(1.035);
  filter: drop-shadow(0 0 22px rgba(249, 184, 67, .68));
}

.engagements-premium__card h2,
.engagements-premium__card h3,
.engagements-premium__card h4 {
  margin: 26px 0 12px !important;
  color: #f2ede5 !important;
  font-family: var(--font-title, Arial, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.engagements-premium__card p {
  max-width: 250px;
  margin: 0 auto !important;
  color: #aaa59c !important;
  font-family: var(--font-text, Arial, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

.engagements-premium__card .edit-pencil,
.engagements-premium__card button,
.engagements-premium__card [contenteditable="true"] { z-index: 4; }

.engagements-premium__intro > *,
.engagements-premium__beam,
.engagements-premium__card {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.engagements-premium__intro > * { transform: translate3d(-38px, 0, 0); filter: blur(5px); }
.engagements-premium__card { transform: translate3d(-24px, 34px, 0); filter: blur(4px); }

.engagements-premium.is-visible .engagements-premium__eyebrow {
  animation: engagements-reveal 700ms 80ms cubic-bezier(.2,.7,.2,1) forwards;
}
.engagements-premium.is-visible .engagements-premium__title {
  animation: engagements-reveal 900ms 220ms cubic-bezier(.2,.7,.2,1) forwards;
}
.engagements-premium.is-visible .engagements-premium__lead {
  animation: engagements-reveal 780ms 430ms cubic-bezier(.2,.7,.2,1) forwards;
}
.engagements-premium.is-visible .engagements-premium__beam { animation: engagements-line-in 800ms 560ms ease forwards; }
.engagements-premium.is-visible .engagements-premium__beam::after { animation: engagements-beam 1200ms 650ms cubic-bezier(.2,.65,.2,1) forwards; }
.engagements-premium.is-visible .engagements-premium__card {
  animation: engagements-card-in 760ms cubic-bezier(.16,.72,.22,1) forwards;
  animation-delay: calc(760ms + var(--card-delay));
}

@keyframes engagements-reveal { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes engagements-line-in { from { opacity: 0; transform: scaleX(.15); transform-origin: left; } to { opacity: 1; transform: scaleX(1); transform-origin: left; } }
@keyframes engagements-beam { 0% { left: -18%; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% - 40px); opacity: 0; } }
@keyframes engagements-card-in { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes engagements-card-sweep { from { left: -70%; } to { left: 135%; } }

@media (max-width: 1080px) {
  .engagements-premium__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-values.engagements-premium { min-height: auto; }
}

@media (max-width: 640px) {
  .hero-values.engagements-premium { padding: 68px 18px 76px; }
  .engagements-premium__eyebrow { margin-bottom: 34px; }
  .engagements-premium__title { font-size: 38px; }
  .engagements-premium__lead { font-size: 15px; }
  .engagements-premium__grid { grid-template-columns: 1fr; gap: 14px; }
  .engagements-premium__card { min-height: 310px; }
}

@media (prefers-reduced-motion: reduce) {
  .engagements-premium__intro > *, .engagements-premium__beam, .engagements-premium__card {
    opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
  }
  .engagements-premium__beam::after { display: none; }
}