.wc-values{position:relative;overflow:hidden}
.wc-values .wc-sec__inner{position:relative;z-index:2}
/* Thread. The .wc-thread wrapper in wc-brand.css supplies the box; this is just
   placement. Bottom-anchored, as this section's composition always was, but on
   a percentage width so the crop holds across breakpoints. */
.wc-values__thread img{right:-6%;bottom:-8%;width:50%;height:auto;opacity:.28;transform:rotate(6deg)}
.wc-values__body{font-size:17px;line-height:1.55;max-width:58ch;opacity:.78;margin:14px 0 0}
.wc-values__grid{display:grid;gap:clamp(28px,3.5vw,48px);margin-top:clamp(32px,4vw,56px)}
/* No line-height was set, so a 34px card heading inherited the body's 1.55 and
   a two or three word phrase wrapped with a full blank line between each line.
   Subgrid then stretches this element so its rule sits at the bottom of the
   row track, which is what lines the rules up across the row, so the loose
   leading also pushed the rule further from its own words on the shorter
   cards. Display leading, as everywhere else at this size. */
.wc-values__word{font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.14;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid currentColor;opacity:1;text-wrap:balance}
.wc-values__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.45;opacity:.78}
.wc-values__body-stack{display:flex;flex-direction:column;gap:18px}

/* Optional bolder sub-heading with its explainer underneath. Repeatable, so a
   column can carry one or several. */
.wc-values__blocks{display:flex;flex-direction:column;gap:16px}
.wc-values__block-heading{margin:0 0 4px;font-size:15.5px;font-weight:600;line-height:1.35}
.wc-values__block-text{margin:0;font-size:15px;line-height:1.5;opacity:.75}

/* Glass cards. The predecessor module, wc-approach, drew these but was dark
   only — its fill was white at 4% and it stated the section had to be dark for
   the cards to read. Here the section can be any of six tones, so the fill is
   the mirror of that on light grounds: midnight at the same weights. */
.wc-values--card-glass .wc-values__col{background:rgba(var(--wc-midnight-rgb),.04);border:1px solid rgba(var(--wc-midnight-rgb),.1);border-radius:var(--wc-radius-md);padding:clamp(24px,2.4vw,32px) clamp(20px,2vw,28px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wc-sec--marine.wc-values--card-glass .wc-values__col,
.wc-sec--midnight.wc-values--card-glass .wc-values__col{background:rgba(var(--wc-white-rgb),.04);border-color:rgba(var(--wc-white-rgb),.1)}
/* Columns follow the item count. The field group allows four but the grid was
   pinned to three, so a fourth column dropped onto a row of its own. Four goes
   2x2 in the middle band rather than 3+1, which orphans the last one. */
@media (min-width:860px){
  .wc-values--2 .wc-values__grid{grid-template-columns:repeat(2,1fr)}
  .wc-values--3 .wc-values__grid{grid-template-columns:repeat(3,1fr)}
  .wc-values--4 .wc-values__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1180px){
  .wc-values--4 .wc-values__grid{grid-template-columns:repeat(4,1fr)}
}

/* Each column is a word, a rule, then its points. With every column laid out
   independently, a word that wraps to two lines dropped its own rule and body
   below the others and the row read as ragged. Handing the columns a shared
   pair of row tracks fixes the word row to the tallest word in that row, so the
   rules line up and every body starts at the same height whatever the wording.
   The row gap is set on the subgrid so the space under the rule stays tight —
   the parent's larger gap is for separating one row of columns from the next.
   Guarded: without subgrid the columns keep today's behaviour. */
@supports (grid-template-rows: subgrid) {
  @media (min-width:860px) {
    .wc-values__col {
      grid-row: span 2;
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 18px;
    }
    .wc-values__word { margin-bottom: 0; }
  }
}