/* Harbor commitments: final shared rules and responsive variants. */
.hb-work__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hb-work__item {
  padding-bottom: 16px;
}

.hb-work__item > * {
  margin: 0;
}

.hb-work__number {
  font: 500 26px/34px var(--font-heading);
  color: var(--hb-accent-text);
}

@media (max-width: 991px) {
  .hb-work__grid {
    grid-template-columns: 1fr;
  }
}

.home main > .hb-work {
  background: var(--ocf-bg);
}

.hb-work__grid {
  display: grid;
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 599px) {
  .hb-work__item {
    padding: 24px;
  }
}

.hb-work {
  background: var(--ocf-bg);
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.hb-work__background {
  background-image: linear-gradient(90deg,
      var(--ocf-bg) 0%,
      color-mix(in srgb, var(--ocf-bg) 94%, transparent) 14%,
      color-mix(in srgb, var(--ocf-bg) 70%, transparent) 36%,
      color-mix(in srgb, var(--ocf-bg) 30%, transparent) 62%,
      transparent 100%),
    var(--hb-work-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hb-work > .container-global {
  position: relative;
  z-index: 1;
}

@media (max-width: 599px) {
  .hb-work__background {
    background-image: linear-gradient(180deg,
        var(--ocf-bg) 0%,
        color-mix(in srgb, var(--ocf-bg) 78%, transparent) 34%,
        color-mix(in srgb, var(--ocf-bg) 24%, transparent) 68%,
        transparent 100%),
      var(--hb-work-image);
  }
}

.hb-work__item h3 {
  color: var(--ocf-heading);
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -.015em;
}

.hb-work__background {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  inset: 0 0 0 50%;
  background: none;
}

.hb-work__background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: var(--hb-work-image);
  background-position: 68% center;
  opacity: .7;
}

.hb-work__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(90deg,
      var(--ocf-bg) 0%,
      color-mix(in srgb, var(--ocf-bg) 96%, transparent) 14%,
      color-mix(in srgb, var(--ocf-bg) 78%, transparent) 32%,
      color-mix(in srgb, var(--ocf-bg) 42%, transparent) 56%,
      color-mix(in srgb, var(--ocf-bg) 20%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ocf-bg) 14%, transparent) 0%,
      transparent 24%,
      transparent 76%,
      color-mix(in srgb, var(--ocf-bg) 18%, transparent) 100%);
}

@media (max-width: 599px) {
  .hb-work__item h3 {
    font-size: 20px;
    line-height: 1.28;
  }
  .hb-work__background {
    opacity: .42;
    inset: 44% 0 0;
  }
  .hb-work__background::before {
    background-position: center 42%;
    opacity: .5;
  }
  .hb-work__background::after {
    background-image: linear-gradient(180deg,
        var(--ocf-bg) 0%,
        color-mix(in srgb, var(--ocf-bg) 84%, transparent) 36%,
        color-mix(in srgb, var(--ocf-bg) 34%, transparent) 70%,
        color-mix(in srgb, var(--ocf-bg) 20%, transparent) 100%);
  }
}

@media (min-width: 600px) {
  .hb-work__background {
    inset: 0 0 0 33%;
  }
  .hb-work__background::after {
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--ocf-bg) 90%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg) 84%, transparent) 14%,
        color-mix(in srgb, var(--ocf-bg) 64%, transparent) 34%,
        color-mix(in srgb, var(--ocf-bg) 30%, transparent) 62%,
        transparent 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--ocf-bg) 14%, transparent) 0%,
        transparent 24%,
        transparent 76%,
        color-mix(in srgb, var(--ocf-bg) 18%, transparent) 100%);
  }
}

.hb-work__layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.hb-work__copy {
  min-width: 0;
}

.hb-work .hb-section-heading {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hb-work__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ocf-border);
}

.hb-work__item {
  flex-direction: column;
  gap: 16px;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ocf-border);
  border-radius: 0;
  background: transparent;
  color: var(--ocf-body);
  box-shadow: none;
}

.hb-work__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.hb-work__item > summary::-webkit-details-marker {
  display: none;
}

.hb-work__item > summary::marker {
  content: "";
}

.hb-work__item > summary:focus-visible {
  outline: 2px solid var(--ocf-primary);
  outline-offset: 5px;
}

.hb-work__title {
  margin: 0;
  color: var(--ocf-heading);
  font: 500 22px/1.28 var(--font-heading);
  letter-spacing: -.015em;
}

.hb-work__toggle {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ocf-primary);
  font: 400 24px/1 var(--font-body);
}

.hb-work__toggle::before {
  content: "+";
}

.hb-work__item[open] .hb-work__toggle::before {
  content: "−";
}

.hb-work__item-body {
  max-width: 56ch;
  padding: 0 48px 22px 0;
}

.hb-work__item-body p {
  margin: 0;
  color: var(--ocf-body);
}

.hb-work__media {
  min-width: 0;
  height: clamp(360px, 42vw, 560px);
  margin: 0;
  overflow: hidden;
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--ocf-image-radius, var(--hb-radius));
  background: var(--ocf-bg-alt);
  box-shadow: var(--image-shadow);
}

.hb-work__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .hb-work__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hb-work__media {
    order: 2;
    height: min(88vw, 440px);
  }
}

@media (max-width: 599px) {
  .hb-work__item > summary {
    gap: 16px;
    padding: 18px 0;
  }
  .hb-work__title {
    font-size: 20px;
    line-height: 1.28;
  }
  .hb-work__item-body {
    padding-right: 40px;
    padding-bottom: 18px;
  }
}