/* Toggle: two (or more) options side by side; one is selected and the large image above / below it switches to match. Used above a .large-image to flip between two pictures (before / after).
   Built to look like a different kind of control from the primary buttons: no dither wipe, no arrow. The selected option is the filled ink bar; the others are outlined. Rolling over an unselected
   option just tints it (the ink at 8%); the selected one does not react. Same height (38px) and type (CTA, Bold 16, Title Case) as the buttons; 228px per option, centred; one grey throughout: the ink.
   <figure class="large-image">
     <div class="toggle" role="group" aria-label="Customer journey map">
       <button class="toggle__option" type="button" aria-pressed="true">Before</button>
       <button class="toggle__option" type="button" aria-pressed="false">After</button>
     </div>
     <div class="large-image__stack">                                          the pictures, in the same order as the options; the first has class is-on
       <img class="is-on" src="…" alt="…" width="1800" height="529">
       <img src="…" alt="…" width="1800" height="529">
     </div>
   </figure>
   js/toggle.js does the switching (a quick crossfade; none with reduced motion). */
.toggle { display: flex; width: min(456px, 100%); margin: 0 auto 20px; }
.toggle__option {
  flex: 1 1 0; min-width: 0; height: 38px; padding: 0 20px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: transparent; color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action);
  font: var(--weight-bold) var(--fs-cta)/var(--lh-normal) var(--font-text); text-transform: capitalize;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.toggle__option + .toggle__option { margin-left: -1px; }   /* one shared 1px line between the two */
.toggle__option:hover:not([aria-pressed="true"]) { background: rgba(63, 63, 63, .08); }
.toggle__option[aria-pressed="true"] { background: var(--color-action); color: var(--color-bg); cursor: default; }
.toggle__option:focus-visible { outline: 2px solid var(--color-action); outline-offset: 3px; }

/* the stack of pictures a toggle switches between (inside .large-image): they sit on top of each other, so the figure is as tall as the tallest */
.large-image__stack { display: grid; }
.large-image__stack > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; }
.large-image__stack > img.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .large-image__stack > img { transition: none; } .toggle__option { transition: none; } }