.hr-suppliers {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 124px) 0 clamp(96px, 10vw, 156px);
  color: #f8f7f4;
  background: #11100f;
}

.hr-suppliers::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 7, 8, .92) 0%, rgba(10, 9, 9, .78) 45%, rgba(15, 12, 10, .48) 100%), url('/assets/trust-story/interior.jpg') center 48% / cover;
  filter: saturate(.64);
}

.hr-suppliers::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 48% 55% at 80% 51%, rgba(230, 123, 45, .16), transparent 76%), linear-gradient(0deg, rgba(5, 5, 6, .9), transparent 55%);
  pointer-events: none;
}

.hr-suppliers__intro {
  position: relative;
  max-width: 1580px;
  margin: 0 auto 58px;
  padding: 0 clamp(24px, 5vw, 80px);
}

.hr-suppliers__intro h2 {
  max-width: 850px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.7rem, 4.3vw, 4.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.hr-suppliers__intro h2 span { color: #ff6029; white-space: nowrap; }
.hr-suppliers__intro p {
  max-width: 660px;
  margin: 0;
  color: #d8d5d1;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.6;
}

.hr-suppliers__stage {
  position: relative;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255, 204, 164, .53);
  border-bottom: 1px solid rgba(255, 170, 104, .58);
  background: linear-gradient(180deg, rgba(39, 31, 27, .76), rgba(15, 15, 16, .8) 29%, rgba(18, 16, 16, .82) 73%, rgba(50, 30, 19, .65));
  box-shadow: 0 -10px 24px rgba(254, 103, 27, .07), inset 0 2px 0 rgba(255, 220, 183, .18), inset 0 -2px 0 rgba(255, 114, 33, .26), 0 30px 52px rgba(0, 0, 0, .6);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.hr-suppliers__stage::before,
.hr-suppliers__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff752e 19%, rgba(255, 220, 176, .96) 29%, transparent 40%, #ff6b20 55%, transparent 75%, #ff8b3c 91%, transparent);
  box-shadow: 0 0 9px #ff641b, 0 0 20px rgba(255, 89, 12, .75);
  pointer-events: none;
}
.hr-suppliers__stage::before { top: 0; }
.hr-suppliers__stage::after { bottom: 0; }

.hr-suppliers__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: 42px 36px;
  margin-block: -42px -36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.hr-suppliers__track {
  display: flex;
  width: max-content;
  animation: hr-suppliers-drift 28s linear infinite;
}
.hr-suppliers__viewport:focus-within .hr-suppliers__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .hr-suppliers__viewport:hover .hr-suppliers__track { animation-play-state: paused; }
}

.hr-suppliers__group {
  display: flex;
  gap: 24px;
  padding-right: 24px;
}

.hr-suppliers__card {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 264px;
  width: 264px;
  height: 166px;
  padding: 20px;
  border: 1px solid rgba(255, 221, 188, .67);
  border-radius: 18px;
  background: linear-gradient(143deg, rgba(119, 99, 86, .39), rgba(36, 35, 35, .56) 32%, rgba(22, 22, 24, .76) 72%, rgba(109, 67, 43, .42));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .35), inset 0 -2px 1px rgba(208, 106, 49, .43), 0 4px 0 rgba(27, 19, 16, .85), 0 17px 24px rgba(0, 0, 0, .47), 0 20px 28px rgba(255, 103, 29, .1);
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
  backdrop-filter: blur(17px) saturate(120%);
  -webkit-backdrop-filter: blur(17px) saturate(120%);
}

.hr-suppliers__card::before {
  content: "";
  position: absolute;
  inset: 3px 4px auto;
  height: 42%;
  border-radius: 15px 15px 55% 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), transparent);
  pointer-events: none;
}

.hr-suppliers__card:hover,
.hr-suppliers__card:focus-visible {
  z-index: 1;
  transform: translateY(-34px) scale(1.035);
  border-color: #ffb173;
  background: linear-gradient(145deg, rgba(132, 104, 85, .54), rgba(45, 41, 40, .68) 42%, rgba(33, 28, 27, .88));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .55), inset 0 -2px 1px #ff7b39, 0 6px 0 rgba(51, 28, 17, .9), 0 27px 36px rgba(0, 0, 0, .63), 0 24px 34px rgba(255, 99, 25, .29), 0 0 21px rgba(255, 131, 54, .24);
}
.hr-suppliers__card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.hr-suppliers__logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 78% 60% at 50% 50%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 74%, transparent);
}
.hr-suppliers__logo img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.hr-suppliers__card[data-supplier="moen"] .hr-suppliers__logo img:first-child,
.hr-suppliers__card[data-supplier="rona"] .hr-suppliers__logo img,
.hr-suppliers__card[data-supplier="ceratec"] .hr-suppliers__logo img,
.hr-suppliers__card[data-supplier="bathdepot"] .hr-suppliers__logo img { filter: brightness(0) invert(1); }
.hr-suppliers__logo img.hr-suppliers__logo-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 73% 0 0);
}

.hr-suppliers__plinth {
  position: relative;
  height: 52px;
  background: linear-gradient(180deg, rgba(70, 50, 38, .92), rgba(15, 14, 14, .96) 27%, rgba(5, 5, 6, .78) 75%, transparent);
  border-bottom: 1px solid rgba(255, 160, 82, .24);
  box-shadow: 0 26px 40px rgba(0, 0, 0, .55), inset 0 3px 8px rgba(255, 99, 26, .22);
}

@keyframes hr-suppliers-drift { to { transform: translateX(-50%); } }

@media (max-width: 700px) {
  .hr-suppliers { padding: 68px 0 98px; }
  .hr-suppliers::before { background-position: 57% center; }
  .hr-suppliers__intro { margin-bottom: 34px; padding: 0 22px; }
  .hr-suppliers__intro h2 { font-size: clamp(2.45rem, 9vw, 3.3rem); }
  .hr-suppliers__intro p { font-size: 1rem; }
  .hr-suppliers__stage { padding: 22px 0 26px; }
  .hr-suppliers__viewport { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .hr-suppliers__viewport::-webkit-scrollbar { display: none; }
  .hr-suppliers__track { animation-duration: 22s; margin-left: 22px; }
  .hr-suppliers__group { gap: 8px; padding: 0 8px 0 0; }
  .hr-suppliers__card { flex-basis: 40vw; width: 40vw; height: 25.6vw; padding: 3vw; border-radius: 12px; scroll-snap-align: center; }
  .hr-suppliers__card::before { inset: 2px 3px auto; border-radius: 10px 10px 55% 55%; }
  .hr-suppliers__card:hover, .hr-suppliers__card:focus-visible { transform: translateY(-8px) scale(1.02); }
  .hr-suppliers__plinth { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-suppliers__viewport { overflow-x: auto; }
  .hr-suppliers__track { animation: none; }
  .hr-suppliers__group[aria-hidden="true"] { display: none; }
  .hr-suppliers__card { transition: none; }
}

/* Blueprint delivery scene: the same cargo moves from the dock to the house. */
.hr-suppliers__stage { padding-bottom: clamp(145px, 15vw, 230px); }
.hr-suppliers__traffic {
  position: absolute;
  inset: auto 0 0;
  height: clamp(180px, 24vw, 360px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.hr-suppliers__site {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .48;
}
.hr-suppliers__vehicle { position: absolute; left: 0; bottom: 21%; }
.hr-suppliers__vehicle img { display: block; width: 100%; height: auto; }
.hr-suppliers__truck { width: 18%; transform: translateX(127.778%); }
.hr-suppliers__truck img { transform: translateY(11.7%); }
.hr-suppliers__forklift { width: 9.3%; }
.hr-suppliers__forklift-frame { position: relative; transform: translateY(2.5%); }
.hr-suppliers__forklift-body { clip-path: inset(0 30.2% 0 0); }
.hr-suppliers__lift { position: absolute; inset: 0; }
.hr-suppliers__lift img { clip-path: inset(55% 0 37% 69.8%); }
.hr-suppliers__forklift--load { transform: translateX(86.022%); }
.hr-suppliers__forklift--unload { transform: translateX(924.731%); }
.hr-suppliers__forklift--unload .hr-suppliers__forklift-frame { transform: translateY(2.5%) scaleX(-1); }
.hr-suppliers__cargo { width: 4.4%; transform: translate(590.909%, -76%); }
.hr-suppliers__cargo img { transform: translateY(14.5%); }
.hr-suppliers__motion-toggle {
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  border: 1px solid rgba(255, 172, 102, .3);
  border-radius: 5px;
  background: rgba(17, 16, 15, .8);
  color: #d3bba7;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.hr-suppliers__motion-toggle:hover { color: #fff; border-color: #ff9b43; }
.hr-suppliers__motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hr-suppliers[data-motion-paused] .hr-suppliers__track { animation-play-state: paused; }
@media (max-width: 700px) {
  .hr-suppliers__stage { padding-bottom: 110px; }
  .hr-suppliers__traffic { height: 160px; }
  .hr-suppliers__motion-toggle { left: 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-suppliers__motion-toggle { display: none; }
}