.wu-steps__row {
  display: grid;
  gap: var(--wu-steps-gap, 40px 32px);
  margin: var(--wu-steps-row-top, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.wu-steps .wu-head:empty + .wu-steps__row,
.wu-steps .wu-wrap > .wu-steps__row:first-child,
.wu-steps__panel > .wu-steps__row:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .wu-steps__row {
    grid-template-columns: repeat(var(--wu-steps-columns, 2), minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .wu-steps--n3 .wu-steps__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wu-steps--n4 .wu-steps__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wu-steps__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wu-steps-item-gap, 12px);
  height: 100%;
  color: inherit;
}

.wu-steps--rule .wu-steps__inner,
.wu-steps--claims .wu-steps__inner {
  padding-top: var(--wu-steps-pad, 24px);
}

/* A gradient hairline above each step. */
.wu-steps--rule .wu-steps__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wu-steps-rule-width, 1px);
  background: var(--wu-rule-gradient, var(--wu-line-strong));
  opacity: var(--wu-steps-rule-opacity, 0.8);
}

.wu-steps--claims .wu-steps__inner {
  border-top: 1px solid var(--wu-line-strong);
}

.wu-steps__num,
.wu-steps__lead {
  color: var(--wu-accent);
  font-family: var(--wu-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The badge marker (3.3.0): the figure on a filled shape. Its size, inner
   padding, radius, face, text, type and tracking are slots. */
.wu-steps--badge .wu-steps__num {
  box-sizing: content-box;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wu-steps-badge-size, 40px);
  height: var(--wu-steps-badge-size, 40px);
  padding: 0 var(--wu-steps-badge-pad, 0px);
  border-radius: var(--wu-steps-badge-radius, var(--wu-radius));
  background: var(--wu-steps-badge-face, var(--wu-accent));
  color: var(--wu-steps-badge-text, var(--wu-ground));
  font: var(--wu-steps-badge-font, 700 18px/1 var(--wu-display));
  letter-spacing: var(--wu-steps-badge-tracking, 0);
  text-transform: none;
}

/* The title's colour is the site's heading colour (theme.json
   styles.elements.heading), as before 3.3.0; the rest are slots. */
.wu-steps__title {
  margin: var(--wu-steps-title-margin, 0);
  font-family: var(--wu-display);
  font-size: var(--wu-steps-title-size, var(--wp--preset--font-size--heading-3));
  font-weight: var(--wu-steps-title-weight, 700);
  line-height: var(--wu-steps-title-line, 1.25);
  letter-spacing: var(--wu-steps-title-tracking, -0.01em);
}

.wu-steps__body {
  margin: 0;
  color: var(--wu-steps-body-colour, var(--wu-muted));
  font-size: var(--wu-steps-body-size, 16px);
  line-height: 1.6;
}

.wu-steps__link {
  margin-top: auto;
  padding-top: 4px;
}

.wu-steps__more {
  margin: var(--wu-steps-foot-top, 48px) 0 0;
}

/* Cards: surface panels, each one link. Border-box, because the inner
   is height: 100% of its cell: with content-box the padding and border
   pushed each card 58px past its cell, into the row below once the
   cards wrap (five towns on /web-design/). */
.wu-steps--cards .wu-steps__inner {
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid var(--wu-line);
  border-radius: var(--wu-card-radius);
  background: var(--wu-surface);
  box-shadow: var(--wu-card-shadow);
  transition: border-color 0.2s, transform 0.35s var(--wu-ease);
}

.wu-steps--cards a.wu-steps__inner:hover {
  border-color: var(--wu-line-strong);
  text-decoration: none;
  transform: translateY(-2px);
}

.wu-steps__go {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 20px;
  height: 20px;
  color: var(--wu-muted);
  transition: color 0.2s, transform 0.25s var(--wu-ease);
}

.wu-steps__go svg {
  width: 20px;
  height: 20px;
}

a.wu-steps__inner:hover .wu-steps__go {
  color: var(--wu-text);
  transform: translateX(3px);
}

/* The inverse ground (3.3.0): the hairline, the title, the figure and the
   lines take the inverse text (--wu-steps-rule-inverse and
   --wu-steps-inverse-muted where a child wants others). */
.wu-ground--inverse .wu-steps__inner::before {
  background: var(--wu-steps-rule-inverse, var(--wu-inverse-text));
}

.wu-ground--inverse .wu-steps__title {
  color: var(--wu-inverse-text);
}

/* The plain, rule and numbered eyebrows draw in the accent, which is made
   for the page's ground; on the inverse ground they take the inverse text
   unless --wu-steps-inverse-accent is set. The pill keeps its own face. */
.wu-steps.wu-ground--inverse :is(.wu-eyebrow, .wu-label) {
  color: var(--wu-steps-inverse-accent, var(--wu-inverse-text));
}

.wu-ground--inverse:not(.wu-steps--badge) .wu-steps__num,
.wu-ground--inverse .wu-steps__lead,
.wu-ground--inverse .wu-steps__body {
  color: var(--wu-steps-inverse-muted, var(--wu-inverse-text));
}

/* The band (3.3.0): the section over a photograph, the words on a panel.
   Phones: the photograph is a strip at the top (--wu-steps-band-strip)
   and the panel overlaps its foot (--wu-steps-band-overlap), on the
   alternate ground. From 768px the photograph fills the section (cover,
   anchored by the block's "focus") and the panel sits inside the wrap with
   the photograph showing round it. The words never sit on the photograph
   and nothing shades it. */
.wu-section.wu-steps--band {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--wu-steps-band-strip, 240px) - var(--wu-steps-band-overlap, 96px));
  background: var(--wu-ground-alt);
}

@media (min-width: 768px) {
  .wu-section.wu-steps--band {
    padding-block: calc(var(--wu-section-y) + 24px);
    background: var(--wu-inverse-ground);
  }
}
.wu-steps__photo {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: var(--wu-steps-band-strip, 240px);
  overflow: hidden;
  background: var(--wu-inverse-ground);
}

@media (min-width: 768px) {
  .wu-steps__photo {
    inset: 0;
    height: auto;
  }
}
.wu-steps__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wu-steps-focus, 50% 50%);
}

/* What, place and year on the photograph: the inverse text on the inverse
   ground. */
.wu-steps__where {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: var(--wu-steps-caption-radius, 4px);
  background: var(--wu-inverse-ground);
  color: var(--wu-inverse-text);
  font: var(--wu-steps-caption-font, 600 13px/1.3 var(--wu-body));
}

@media (min-width: 768px) {
  .wu-steps__where {
    top: 16px;
    right: 16px;
  }
}
.wu-steps__panel {
  padding: 32px 20px 36px;
  border-radius: var(--wu-steps-panel-radius, var(--wu-card-radius));
  background: var(--wu-steps-panel-face, var(--wu-ground));
  color: var(--wu-steps-panel-text, var(--wu-text));
  box-shadow: var(--wu-steps-panel-shadow, none);
}

@media (min-width: 768px) {
  .wu-steps__panel {
    padding: 48px 40px 52px;
  }
}
@media (min-width: 1025px) {
  .wu-steps__panel {
    padding: 56px 56px 60px;
  }
}
/* On phones the panel runs nearly edge to edge (the strip shows above it). */
@media (max-width: 767.98px) {
  .wu-steps--band > .wu-wrap {
    padding-inline: var(--wu-steps-band-gutter, 12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wu-steps--cards .wu-steps__inner {
    transition: none;
    transform: none;
  }
}
.wu-anchor {
  display: block;
  position: relative;
  top: calc(-1 * var(--wu-header-h) - 16px);
  height: 0;
}