/* ─── DIVISIONS ─── */
.divisions {
  padding: 0 var(--margin);
}

.division-row {
  display: grid;
  grid-template-columns: 38px 220px 1fr minmax(0, 320px) 100px;
  align-items: center;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  cursor: pointer;
  transition: none;
}

.div-marker {
  width: 34px;
  height: 34px;
  background: url('../assets/branding/division-marker.jpg') center center / 92% auto no-repeat;
  opacity: 0;
  filter: grayscale(100%) brightness(1.45) contrast(1.08);
  transform: scale(.88);
  transition: opacity .28s ease, transform .35s ease;
  user-select: none;
}

.division-row:hover .div-marker {
  opacity: .82;
  transform: scale(1);
}

.div-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.div-desc {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--gray-1);
  line-height: 1.45;
}

.div-img {
  width: 320px;
  height: 108px;
  object-fit: cover;
  filter: grayscale(18%) saturate(72%) brightness(0.68);
  opacity: 0.88;
  transition: filter 0.35s ease, opacity 0.35s ease;
  display: block;
}

.div-explore {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-2);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.25s, gap 0.35s;
  white-space: nowrap;
  justify-content: flex-end;
}

.division-row:hover .div-img { opacity: 1; filter: grayscale(0%) saturate(92%) brightness(0.96); }

.work-intro, .division-row, .bottom-band {
  transition: opacity .75s cubic-bezier(.2,.7,.2,1),
              transform .75s cubic-bezier(.2,.7,.2,1);
}
.js-motion .work-intro,
.js-motion .division-row,
.js-motion .bottom-band {
  opacity: 0;
  transform: translateY(18px);
}
.js-motion .work-intro.is-visible,
.js-motion .division-row.is-visible,
.js-motion .bottom-band.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.division-row { position: relative; }
.division-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--margin));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.018) 48%, transparent);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.division-row:hover::before { opacity: 1; }
.division-row:hover .div-explore { color: var(--white); gap: 16px; }