/* "Who We Help" — fullscreen video background with floating industry cards on the left.
   Homepage only. Cards swap the underlying video on click. */

.industry-selector {
  position: relative;
  min-height: 600px;
  background-color: #0D0D0D;   /* fallback before/if the video doesn't paint */
  color: #fff;
  overflow: hidden;
  padding: 96px 0;
  display: flex;
  align-items: center;
}

.industry-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.industry-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

.industry-content {
  position: relative;
  z-index: 2;
  padding-left: 60px;
  padding-right: 24px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Heading / label / subtext above the cards */
.industry-text { max-width: 560px; margin-bottom: 40px; }

.industry-text .label {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #b5a8ff;
  text-transform: uppercase;
  margin: 0 0 24px;
  font-weight: 500;
}

.industry-text h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 500;
  color: #fff;
  margin: 0 0 20px;
}

.industry-text h2 .highlight {
  display: inline-block;
  background: #4423FD;
  color: #fff;
  padding: 0 0.18em;
  border-radius: 0.15em;
  font-style: italic;
}

.industry-text > p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.5;
}

/* Card stack — now also acts as the positioning context for the hover sub-panels (siblings of cards) */
.industry-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.industry-card {
  display: flex;
  align-items: center;
  width: 420px;
  padding: 16px 24px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.industry-card:hover {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(2px);
}

.industry-card.active {
  background: rgba(68, 35, 253, 0.6);   /* violet, translucent */
  border-color: #ffffff;                /* white border per spec */
}

.industry-card-icon {
  font-size: 22px;
  line-height: 1;
  margin-right: 16px;
  flex-shrink: 0;
}

.industry-card-name {
  flex: 1;
  color: #fff;
}

.industry-card-arrow {
  margin-left: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  transition: color 200ms ease, transform 200ms ease;
  flex-shrink: 0;
}

.industry-card:hover .industry-card-arrow,
.industry-card.active .industry-card-arrow {
  color: #fff;
  transform: translateX(4px);
}

/* Hover sub-panel — appears immediately to the right of the cards column.
   Touches the card's right edge (left:420px = card width) so the mouse can slide
   from card into panel without losing :hover. Pure CSS — no JS needed. */
.industry-sub-panel {
  position: absolute;
  top: 0;
  left: 420px;                            /* meets the cards' right edge */
  width: 280px;
  padding: 8px 0;
  background: rgba(20, 20, 20, 0.7);       /* same dark semi-transparent as cards */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity 280ms ease,
              transform 280ms ease,
              visibility 0s linear 280ms;  /* delay visibility flip until after the fade-out */
  z-index: 3;
}

.industry-sub-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease, padding 200ms ease;
}

.industry-sub-panel a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.industry-sub-panel a::after {
  content: "→";
  color: rgba(255, 255, 255, 0.28);
  transition: color 200ms ease, transform 200ms ease;
}

.industry-sub-panel a:hover {
  color: #fff;
  background-color: rgba(68, 35, 253, 0.18);
  padding-left: 28px;
}

.industry-sub-panel a:hover::after {
  color: #fff;
  transform: translateX(4px);
}

/* Show the matching panel whenever the corresponding card is hovered.
   The trailing :hover on the panel itself keeps the panel open while the
   pointer is moving over its own area (links etc.). */
.industry-card[data-group="home-services"]:hover ~ .industry-sub-panel[data-group="home-services"],
.industry-card[data-group="legal"]:hover ~ .industry-sub-panel[data-group="legal"],
.industry-card[data-group="medical-dental"]:hover ~ .industry-sub-panel[data-group="medical-dental"],
.industry-card[data-group="automotive"]:hover ~ .industry-sub-panel[data-group="automotive"],
.industry-card[data-group="beauty-spa"]:hover ~ .industry-sub-panel[data-group="beauty-spa"],
.industry-card[data-group="fitness"]:hover ~ .industry-sub-panel[data-group="fitness"],
.industry-card[data-group="restaurants"]:hover ~ .industry-sub-panel[data-group="restaurants"],
.industry-card[data-group="real-estate"]:hover ~ .industry-sub-panel[data-group="real-estate"],
.industry-sub-panel.is-open,
.industry-sub-panel:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition: opacity 280ms ease,
              transform 280ms ease,
              visibility 0s linear 0s;
}

/* Tablet and below: tighten the left padding, allow cards to size down */
@media (max-width: 991px) {
  .industry-selector { padding: 80px 0; min-height: 560px; }
  .industry-content { padding-left: 32px; padding-right: 32px; }
  .industry-card { width: 100%; max-width: 420px; }
  /* Hover sub-panels don't work well on touch and there isn't room beside the cards.
     Hide them entirely — the card's video swap behavior still works on tap. */
  .industry-sub-panel { display: none; }
}

@media (max-width: 600px) {
  .industry-content { padding-left: 20px; padding-right: 20px; }
  .industry-text h2 { font-size: 32px; }
  .industry-card { padding: 14px 18px; font-size: 16px; }
}