/* v3: focused accents within the approved green/dark identity. */

/* The motif sits on the lower optical edge of the second headline line. */
.panorama .hero-content .steps {
  top: auto;
  bottom: 50px;
  right: var(--hero-inset);
  opacity: .85;
}

/* A single emphasis in the otherwise quiet services overview. */
.directions .title-accent,
.team .title-accent {
  color: var(--dark);
  background: var(--green);
  padding: .015em .13em .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The marker indicates the open service without shifting its text. */
#production .service summary { position: relative; }
#production .service summary::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: -18px;
  width: 4px;
  background: var(--green);
  opacity: 0;
}
#production .service[open]:not([data-expanded="false"]) summary::before,
#production .service[data-expanded="true"] summary::before { opacity: 1; }
#production .production-cta {
  margin-top: 28px;
  min-height: 52px;
  padding-inline: 26px;
}

/* Only an available next action receives the filled treatment. */
.team-button[data-team="next"]:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: var(--dark);
}
@media (hover: hover) {
  .team-button[data-team="next"]:not(:disabled):hover {
    background: var(--dark);
    border-color: var(--dark);
    color: white;
  }
}
.team-button[data-team="next"]:not(:disabled):active {
  background: var(--dark);
  border-color: var(--dark);
  color: white;
}

@media (max-width: 700px) {
  .panorama .hero-content .steps { display: none; }
  #production .service summary::before { left: -12px; top: 21px; bottom: 21px; width: 3px; }
  #production .production-cta { margin-top: 24px; }
}

/* v4: the homepage project cards use the same sequence as the portfolio. */
#projects .case {
  --line-fill-duration: .7s;
  --line-reset-duration: .25s;
  --arrow-duration: .16s;
}
#projects .case-action {
  color: var(--dark);
  border-bottom-color: #b5c1ae;
}
#projects .case-action::after {
  height: 1px;
  transition: transform var(--line-reset-duration) ease-out;
}
#projects .case-action svg {
  transition: color var(--arrow-duration) ease-out, transform 300ms var(--motion-arrive);
}
#projects .case-link:focus-visible .case-action::after {
  transform: scaleX(1);
  transition-duration: var(--line-fill-duration);
}
#projects .case-link:focus-visible .case-action svg {
  color: var(--green);
  transition-delay: var(--line-fill-duration), 0s;
}
@media (hover: hover) {
  #projects .case-link:hover .case-action::after {
    transform: scaleX(1);
    transition-duration: var(--line-fill-duration);
  }
  #projects .case-link:hover .case-action svg {
    color: var(--green);
    transition-delay: var(--line-fill-duration), 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  #projects .case {
    --line-fill-duration: 0s;
    --line-reset-duration: 0s;
    --arrow-duration: 0s;
  }
}