/* English homepage brand sourcing cards. Scoped to avoid changing other pages. */
.brand-sourcing-grid {
  gap: 26px;
}

.brand-source-card {
  --brand-accent: #2db89a;
  --brand-accent-rgb: 45, 184, 154;
  border-color: #dde6ee;
  box-shadow: 0 12px 34px rgba(17, 42, 73, .09);
}

.brand-source-card:hover {
  border-color: rgba(var(--brand-accent-rgb), .48);
  box-shadow: 0 22px 50px rgba(17, 42, 73, .16);
}

.brand-card-visual {
  min-height: 168px;
  padding: 24px 24px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 88% 15%, rgba(var(--brand-accent-rgb), .20), transparent 33%),
    linear-gradient(145deg, #f8fbfd 0%, #eef4f7 100%);
  border-bottom: 4px solid var(--brand-accent);
}

.brand-card-visual::before,
.brand-card-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--brand-accent-rgb), .16);
  border-radius: 50%;
}

.brand-card-visual::before {
  width: 150px;
  height: 150px;
  top: -94px;
  right: -28px;
}

.brand-card-visual::after {
  width: 72px;
  height: 72px;
  bottom: -47px;
  left: 20px;
}

.brand-card-kicker,
.brand-card-category {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.brand-card-kicker {
  top: 15px;
  left: 18px;
  color: #65768a;
}

.brand-card-category {
  right: 16px;
  bottom: 13px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--brand-accent);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(var(--brand-accent-rgb), .22);
  backdrop-filter: blur(4px);
}

.brand-logo-panel {
  position: relative;
  z-index: 1;
  width: 78%;
  min-height: 76px;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(17, 42, 73, .08);
  border-radius: 14px;
  box-shadow: 0 11px 26px rgba(17, 42, 73, .10);
  transform: translateY(4px);
  transition: transform .3s ease, box-shadow .3s ease;
}

.brand-source-card:hover .brand-logo-panel {
  transform: translateY(0) scale(1.025);
  box-shadow: 0 15px 32px rgba(17, 42, 73, .15);
}

.brand-logo-panel img {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 50px;
  object-fit: contain;
}

.brand-logo-panel--dark {
  background: #17293a;
}

.brand-card-visual--photo {
  background: linear-gradient(145deg, #f8fbfd, #e8f1f3);
}

.brand-card-visual--photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 88%;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(17, 42, 73, .18));
  transition: transform .3s ease;
}

.brand-source-card:hover .brand-card-visual--photo img {
  transform: translateY(-3px) scale(1.025);
}

.brand-source-card .card-body {
  padding: 25px 26px 27px;
  border-top: 0;
}

.brand-source-card .en,
.brand-source-card .card-link {
  color: var(--brand-accent);
}

.brand-source-card--gstek { --brand-accent: #d5692b; --brand-accent-rgb: 213, 105, 43; }
.brand-source-card--agilent { --brand-accent: #147a9b; --brand-accent-rgb: 20, 122, 155; }
.brand-source-card--shimadzu { --brand-accent: #245ca6; --brand-accent-rgb: 36, 92, 166; }
.brand-source-card--waters { --brand-accent: #b22432; --brand-accent-rgb: 178, 36, 50; }
.brand-source-card--sciex { --brand-accent: #dc2738; --brand-accent-rgb: 220, 39, 56; }
.brand-source-card--bd { --brand-accent: #ef6b32; --brand-accent-rgb: 239, 107, 50; }
.brand-source-card--rigaku { --brand-accent: #2b69a8; --brand-accent-rgb: 43, 105, 168; }

@media (max-width: 760px) {
  .brand-card-visual { min-height: 150px; }
  .brand-logo-panel { width: 82%; }
  .brand-logo-panel img { max-width: 165px; max-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo-panel,
  .brand-card-visual--photo img { transition: none; }
}