/* Agentic "Our Approach": full-bleed video background with four glass cards in one row. Loaded before agentic-approach css, so selectors carry the extra .approach-video class to win. */
#approach.approach-video { position: relative; overflow: hidden; isolation: isolate; background: #0b1222; }
#approach.approach-video .approach-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
#approach.approach-video .approach-video__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(11 18 34 / 88%) 0%, rgb(11 18 34 / 70%) 45%, rgb(11 18 34 / 82%) 100%);
}
#approach.approach-video > .container { padding-top: 70px; }
#approach.approach-video .eyebrow { color: var(--gold); }
#approach.approach-video .display-2 { color: #fff; }
#approach.approach-video .display-2 .accent { color: #6f9bff; }
#approach.approach-video .lead { color: #c3cbe0; }
/* Same 4-track grid as the cards so the paragraph starts on card 03's left edge. */
#approach.approach-video .head-split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; align-items: end; }
#approach.approach-video .head-split > div { grid-column: 1 / 3; }
#approach.approach-video .head-split > .lead { grid-column: 3 / 5; max-width: none; margin: 0; }

#approach.approach-video .blockers { display: block; }
#approach.approach-video .blockers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#approach.approach-video .blocker {
  position: relative; display: flex; flex-direction: column; min-height: 280px;
  padding: 26px 24px 24px; border-radius: 20px;
  background: rgb(16 26 48 / 55%);
  border: 1px solid rgb(255 255 255 / 12%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
#approach.approach-video .blocker:hover {
  border-color: rgb(111 155 255 / 38%);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 60%), 0 0 32px -10px rgb(70 120 255 / 45%), inset 0 1px 0 rgb(255 255 255 / 8%);
  transform: translateY(-3px);
}
#approach.approach-video .blocker__step { color: var(--gold); }
#approach.approach-video .blocker__icon { background: rgb(111 155 255 / 16%); color: #9dbbff; border: 1px solid rgb(111 155 255 / 22%); }
#approach.approach-video .blocker__title { color: #fff; }
#approach.approach-video .blocker__text { color: #c3cbe0; margin-bottom: 52px; }
#approach.approach-video .blocker__go {
  position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 28%);
}
#approach.approach-video .blocker:hover .blocker__go { border-color: var(--gold); color: var(--gold); }

@media (max-width: 1100px) {
  #approach.approach-video .blockers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #approach.approach-video .head-split { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  #approach.approach-video .head-split > div, #approach.approach-video .head-split > .lead { grid-column: 1; }
}
@media (max-width: 900px) { #approach.approach-video > .container { padding-top: 0; } }
@media (max-width: 640px) {
  #approach.approach-video .blockers__grid { grid-template-columns: minmax(0, 1fr); }
  #approach.approach-video .blocker { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { #approach.approach-video .blocker { transition: none; } }
