/* Local presentation variant; only approach and project stages are light. */
.gasyr :is(#gasyr-approach, #gasyr-stages, #gasyr-approach + .vision) {
  --bg: #fff;
  --panel: #f5f5f2;
  --text: #242423;
  --muted: #62625e;
  --line: #d4d4ce;
  --paper: #242423;
  --hover: #e9dfd1;
  color: var(--text);
  background: var(--bg);
}

.gasyr :is(#gasyr-approach, #gasyr-stages) {
  padding-block: clamp(80px, 9vw, 130px);
}

.gasyr :is(#gasyr-approach, #gasyr-stages, #gasyr-approach + .vision) .muted {
  color: #777770;
}

/* Keep content away from both sides of a light/dark boundary. */
.gasyr #gasyr-budget {
  padding-top: clamp(80px, 9vw, 130px);
}

.gasyr #gasyr-approach + .vision {
  margin-block: 0;
  padding-bottom: clamp(80px, 9vw, 130px);
}

.gasyr #gasyr-approach + .vision::after {
  bottom: clamp(80px, 9vw, 130px);
}

.gasyr #gasyr-approach + .vision .joint {
  background: #B28D60;
}

.gasyr #gasyr-approach + .vision .image-caption {
  color: #f4f4f1;
}

.gasyr #gasyr-approach .button {
  background: transparent;
  color: #242423;
  border-color: #9a9a92;
}

.gasyr #gasyr-approach .button:focus-visible {
  background: #e9dfd1;
  color: #242423;
  border-color: #B28D60;
}

.gasyr #gasyr-stages .process-photo figcaption {
  color: #f4f4f1;
}

.gasyr #gasyr-stages .process-step::before,
.gasyr #gasyr-stages .process-step:last-child::after {
  background: #B28D60;
}

.gasyr #gasyr-stages .process-number {
  color: #7b623f;
}

.gasyr #gasyr-stages .process-step[open] {
  background: #f5f5f2;
}

@media (hover: hover) and (pointer: fine) {
  .gasyr #gasyr-approach .button:hover {
    background: #e9dfd1;
    color: #242423;
    border-color: #B28D60;
  }
  .gasyr #gasyr-stages .process-step summary:hover :is(h3, .process-plus) {
    color: #7b623f;
  }
}

@media (hover: none) {
  .gasyr #gasyr-approach .button:active {
    background: #e9dfd1;
    color: #242423;
    border-color: #B28D60;
  }
}