/* ============================================================
   HOME: INDUSTRY CARDS
   Maroon-to-ink-blue gradient cards with cream text. No pure white.
   "#industries" plus stacked ":not(#_)" beats the older page themes.
   ============================================================ */
#industries {
  --i-cream: #F7F2EA;
  --i-cream-2: #F1EADF;
  --i-ink: #0B1F3A;
  --i-blue: #1E3A8A;
  --i-mr: #7D1B2C;
  --i-mr-2: #B0192E;
}

html body #industries:not(#_):not(#_) .industries__grid {
  align-items: stretch;
  gap: 1.4rem;
}

/* ---------- card ---------- */
html body #industries:not(#_):not(#_) .industry-card {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid rgba(247, 242, 234, 0.16) !important;
  background: linear-gradient(160deg, #7D1B2C 0%, #5A1F4E 48%, #1E3A8A 100%) !important;
  box-shadow: 0 16px 36px rgba(11, 31, 58, 0.22), 0 4px 12px rgba(125, 27, 44, 0.16) !important;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s ease, background .45s ease !important;
}
/* gradient glow ring that wakes up on hover */
html body #industries:not(#_):not(#_) .industry-card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(224, 106, 124, 0.9), rgba(143, 168, 255, 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s ease;
}
html body #industries:not(#_):not(#_) .industry-card:is(:hover, :focus-visible, :focus-within) {
  background: linear-gradient(160deg, #94243A 0%, #6A2660 48%, #2B4FB0 100%) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 54px rgba(30, 58, 138, 0.38), 0 10px 26px rgba(125, 27, 44, 0.3) !important;
  border-color: transparent !important;
}
html body #industries:not(#_):not(#_) .industry-card:is(:hover, :focus-visible, :focus-within)::before { opacity: 1; }

/* ---------- photo blends into the gradient ---------- */
html body #industries:not(#_):not(#_) .industry-card__img-wrap {
  position: relative;
  height: 210px;
  border-radius: 0;
  margin: 0;
}
html body #industries:not(#_):not(#_) .industry-card__img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 31, 58, 0.35) 0%, rgba(11, 31, 58, 0) 35%),
    linear-gradient(180deg, transparent 40%, rgba(90, 31, 78, 0.92) 100%);
}
html body #industries:not(#_):not(#_) .industry-card__img-wrap img {
  filter: brightness(0.95) saturate(1.05) !important;
  transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1), filter .5s ease !important;
}
html body #industries:not(#_):not(#_) .industry-card:is(:hover, :focus-visible) .industry-card__img-wrap img {
  transform: scale(1.09);
  filter: brightness(1.05) saturate(1.12) !important;
}

/* ---------- number badge, clearly visible on the photo ---------- */
html body #industries:not(#_):not(#_) .industry-card__num {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  margin: 0 !important; padding: 0 !important;
  min-width: 46px; height: 46px; padding-inline: 10px !important;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--i-ink), #13294B) !important;
  border: 1.5px solid var(--i-cream);
  box-shadow: 0 8px 18px rgba(11, 31, 58, 0.4);
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic; font-weight: 700 !important;
  font-size: 1.25rem !important; letter-spacing: 0 !important; line-height: 1;
  color: var(--i-cream) !important; -webkit-text-fill-color: var(--i-cream) !important;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), background .4s ease;
}
html body #industries:not(#_):not(#_) .industry-card__num::after { content: none; }
html body #industries:not(#_):not(#_) .industry-card:hover .industry-card__num {
  transform: scale(1.12) rotate(-4deg);
  background: linear-gradient(135deg, var(--i-mr), var(--i-ink)) !important;
  color: var(--i-cream) !important; -webkit-text-fill-color: var(--i-cream) !important;
}

/* ---------- text ---------- */
html body #industries:not(#_):not(#_) .industry-card__content {
  flex: 1; display: flex; flex-direction: column;
  padding: 0.2rem 1.4rem 1.7rem !important;
}
html body #industries:not(#_):not(#_) .industry-card__title {
  margin: 0 0 0.7rem !important;
  color: var(--i-cream) !important; -webkit-text-fill-color: var(--i-cream) !important;
  background: none !important; filter: none !important;
  font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; line-height: 1.5;
}
html body #industries:not(#_):not(#_) .industry-card__title :is(.ink-grad, *) {
  background: none !important; background-image: none !important;
  color: var(--i-cream) !important; -webkit-text-fill-color: var(--i-cream) !important;
}
html body #industries:not(#_):not(#_) .industry-card:hover .industry-card__title { color: var(--i-cream) !important; -webkit-text-fill-color: var(--i-cream) !important; }
html body #industries:not(#_):not(#_) .industry-card__desc {
  color: rgba(247, 242, 234, 0.9) !important; -webkit-text-fill-color: rgba(247, 242, 234, 0.9) !important;
  font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.7 !important;
  margin: 0 0 1.1rem;
}

/* ---------- tags as pill chips, pinned to the bottom so cards line up ---------- */
html body #industries:not(#_):not(#_) .industry-card__tags {
  margin: auto 0 0 !important;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
html body #industries:not(#_):not(#_) .industry-card__tags span {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(247, 242, 234, 0.14) !important;
  border: 1px solid rgba(247, 242, 234, 0.34) !important;
  color: var(--i-cream) !important; -webkit-text-fill-color: var(--i-cream) !important;
  font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.3;
  transition: background .3s ease, border-color .3s ease;
}
html body #industries:not(#_):not(#_) .industry-card:hover .industry-card__tags span {
  background: rgba(247, 242, 234, 0.2);
  border-color: rgba(247, 242, 234, 0.5);
}

/* ---------- bottom accent bar ---------- */
html body #industries:not(#_):not(#_) .industry-card__bar {
  background: linear-gradient(90deg, #E06A7C, #8FA8FF) !important;
  height: 4px; opacity: 1;
}

@media (max-width: 768px) {
  html body #industries:not(#_):not(#_) .industry-card__img-wrap { height: 190px; }
  html body #industries:not(#_):not(#_) .industry-card:hover { transform: translateY(-4px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #industries:not(#_):not(#_) .industry-card,
  html body #industries:not(#_):not(#_) .industry-card__img-wrap img,
  html body #industries:not(#_):not(#_) .industry-card__num { transition: none !important; }
  html body #industries:not(#_):not(#_) .industry-card:hover { transform: none !important; }
}