/* ---------- Expertise (Figma: left column sticky, 3 chamfered cards 602x377 stacked at 72px gaps, grid band behind the last card) ---------- */
.expertise { position: relative; background: var(--c-black); color: var(--c-white); padding-bottom: 64.8px; overflow-x: clip; }
.expertise__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 602.23px); width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; position: relative; z-index: 2; }
.expertise__side { padding-top: 90.1px; padding-bottom: 150px; }
.expertise__sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); max-width: 476px; }
.expertise__title { max-width: 449px; margin-bottom: 27px; }
.expertise__text { max-width: 441.6px; font-size: var(--fs-body); line-height: var(--lh-auto); }
.expertise__tabs { margin-top: 55.9px; max-width: 317.2px; }
.expertise__tab { display: flex; align-items: center; gap: 14.6px; width: 100%; padding-block: 19.6px; text-align: left; color: var(--c-white); border-top: 1px solid rgba(255, 255, 255, 0.5); }
.expertise__tab:first-child { border-top: 0; padding-top: 0; }
.expertise__tab::before { content: ""; width: 20.3px; height: 20.6px; flex: none; background: url("../../img/bullet.svg") center / 100% 100% no-repeat; }
.expertise__tab.is-active::before { background-image: url("../../img/bullet-active.svg"); }
.expertise__tab:hover { color: var(--c-yellow); }

.expertise__cards { padding-top: 35.8px; display: grid; gap: 72.2px; }
.xcard {
  --cx: 52.5px; --cy: 49.2px; position: relative; isolation: isolate; height: 376.76px; background: rgba(255, 255, 255, 0.53);
  clip-path: polygon(var(--cx) 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% calc(100% - var(--cy)), calc(100% - var(--cx)) 100%, var(--cx) 100%, 0 calc(100% - var(--cy)), 0 var(--cy));
}
.xcard__inner {
  position: absolute; inset: 1px; background: #050505; overflow: hidden;
  clip-path: polygon(calc(var(--cx) - 0.6px) 0, calc(100% - var(--cx) + 0.6px) 0, 100% calc(var(--cy) - 0.6px), 100% calc(100% - var(--cy) + 0.6px), calc(100% - var(--cx) + 0.6px) 100%, calc(var(--cx) - 0.6px) 100%, 0 calc(100% - var(--cy) + 0.6px), 0 calc(var(--cy) - 0.6px));
}
.xcard__bg { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 100%); min-height: 100%; object-fit: cover; max-width: none; height: auto; filter: grayscale(1) brightness(0.2) contrast(1.15); transition: filter var(--dur-slow) var(--ease); }
.xcard:hover .xcard__bg { filter: grayscale(1) brightness(0.3) contrast(1.15); }   /* [ASSUMED] */
.xcard__badge { position: absolute; left: 57.8px; top: 45.2px; width: 46.1px; height: 46.95px; display: grid; place-items: center; background: url("../../img/badge.svg") center / 100% 100% no-repeat; }
.xcard__title { position: absolute; left: 57.8px; right: 40px; top: 217.9px; font-size: var(--fs-card-title); line-height: 25px; font-weight: 700; color: var(--c-yellow); }
.xcard__text { position: absolute; left: 57.8px; top: 257.6px; max-width: var(--tw, 370.3px); font-size: var(--fs-body-sm); line-height: 26px; }

/* Full-bleed grid band that sits behind the last card and under the video (199px of it shows above the video) */
.expertise .grid-band { height: 198.6px; inset: auto 0 0 0; z-index: 1; }

@media (max-width: 1100px) {
  .expertise__grid { grid-template-columns: 1fr; }
  .expertise__side { padding-top: 72px; }
  .expertise__sticky { position: static; max-width: none; }
  .expertise__tabs { display: none; }
  .expertise__cards { padding-top: 40px; gap: 24px; }
}
@media (max-width: 767px) {
  .xcard { height: auto; min-height: 320px; --cx: 28px; --cy: 26px; }
  .xcard__inner { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 28px; min-height: 318px; position: relative; inset: auto; }
  .xcard { padding: 1px; }
  .xcard__badge { left: 24px; top: 24px; }
  .xcard__title, .xcard__text { position: relative; left: auto; right: auto; top: auto; }
  .xcard__title { margin-bottom: 12px; }
  .xcard__text { max-width: none; line-height: 24px; }
}

/* ---------- Field video banner ---------- */
.banner { position: relative; background: #000; height: 42.14vw; min-height: 260px; max-height: 760px; overflow: hidden; }
.banner video, .banner img { width: 100%; height: 100%; object-fit: cover; }