/* Photographs stay within one quiet visual, including on small screens. */
.home-page .hero-visual.work-slideshow {
  display: block;
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #dfe6db;
  isolation: isolate;
}

.home-page .work-slides {
  position: absolute;
  inset: 0;
}

.home-page .work-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.home-page .work-slideshow.is-enhanced .work-slide {
  transition: opacity 800ms ease, visibility 0s 800ms;
}

.home-page .work-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.home-page .work-slideshow.is-enhanced .work-slide.is-active { transition-delay: 0s; }

.home-page .work-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-page .work-slide::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgb(12 31 27 / 80%));
  pointer-events: none;
}

.home-page .work-slide figcaption {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 72px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.25;
}

.home-page .work-slide figcaption a {
  display: inline-block;
  padding-block: 5px;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.home-page .work-slideshow-controls {
  display: none;
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 16px;
  align-items: center;
  gap: 7px;
  color: #fff;
}

.home-page .work-slideshow.is-enhanced .work-slideshow-controls { display: flex; }

.home-page .work-slideshow-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgb(255 255 255 / 36%);
  border-radius: 50%;
  padding: 8px;
  background: rgb(15 38 32 / 62%);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  touch-action: manipulation;
}

.home-page .work-slideshow-controls button:hover { background: #193b31; }

.home-page .work-slideshow-controls button:focus-visible,
.home-page .work-slide figcaption a:focus-visible {
  outline: 3px solid #f3cc62;
  outline-offset: 3px;
}

/* Keep a keyboard/screen-reader stop control without a visible pause pill. */
.home-page .work-slideshow [data-slide-toggle] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.home-page .work-slideshow [data-slide-toggle]:focus-visible {
  z-index: 5;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip-path: none;
  border-radius: 8px;
  background: #19322e;
  color: #fff;
  outline: 3px solid #f3cc62;
  outline-offset: 3px;
}

/* One matching example travels with each photograph; no competing loop. */
.home-page .work-match {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  width: min(370px, calc(100% - 36px));
  padding: 13px 16px 16px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 12px;
  background: rgb(253 252 247 / 97%);
  box-shadow: 0 5px 20px rgb(12 31 27 / 9%);
  color: #19322e;
}
.home-page .work-match-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 10px;
  line-height: 1.2;
  color: #5d6f63;
}
.home-page .work-match-heading span:first-child { font-weight: 600; }
.home-page .work-match-example { font-size: 9px; letter-spacing: .03em; }
.home-page .work-match-people { display: grid; grid-template-columns: 1fr 42px 1.25fr; align-items: center; gap: 10px; }
.home-page .work-match-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-page .work-match-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border: 1px solid #dce3d5;
  border-radius: 50%;
  background: #e9eee3;
  font: 600 14px/1 system-ui, sans-serif;
}
.home-page .work-match strong { display: block; font-size: 14px; line-height: 1.3; font-weight: 700; }
.home-page .work-match small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: #657165; }
.home-page .work-match-line { position: relative; height: 1px; background: #d6ddcf; }
.home-page .work-match-line::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #97a68c; border-right: 1px solid #97a68c; transform: rotate(45deg); }
.home-page .work-match-line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #c7952e; opacity: 0; }
.home-page .work-slideshow.is-enhanced .work-slide.is-active .work-match-line i { animation: work-match-connect 2.2s .5s ease-in-out both; }
.home-page .work-slideshow[data-motion-paused="true"] .work-match-line i { animation-play-state: paused; }
@keyframes work-match-connect { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(35px); } }

.home-page .work-slideshow-controls [data-slide-count] {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-page .work-slideshow-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .home-page .hero-visual.work-slideshow { height: 340px; }
}

@media (max-width: 620px) {
  .home-page .hero-visual.work-slideshow { height: 310px; border-radius: 16px; }
  .home-page .work-slide img { height: 210px; }
  .home-page .work-slide::after { top: 70px; bottom: 100px; }
  .home-page .work-slide figcaption { left: 16px; right: 16px; bottom: 166px; font-size: 21px; }
  .home-page .work-slideshow-controls { left: 14px; right: 14px; bottom: 112px; }
  .home-page .work-match { top: auto; bottom: 0; left: 0; width: 100%; height: 100px; padding: 13px 15px; border: 0; border-radius: 0; box-shadow: none; background: #f2f3eb; }
  .home-page .work-match-people { grid-template-columns: 1fr 42px 1.2fr; gap: 8px; }
  .home-page .work-match-avatar { flex-basis: 28px; height: 28px; font-size: 12px; }
  .home-page .work-match strong { font-size: 13px; }
  .home-page .work-match small { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .work-slideshow.is-enhanced .work-slide { transition: none; }
  .home-page .work-slideshow.is-enhanced .work-slide.is-active .work-match-line i { animation: none; }
}

@media print {
  .home-page .hero-visual.work-slideshow { display: none; }
}