/* ── Lo que puedes esperar ─────────────────────────────────────────────────
   Three promises in a row, each drawn in the accent as line work at a single
   stroke weight, so the three read as one set.

   The icons that came with this row said nothing about the lines under them —
   a coffee cup over "the consultation is not on a timer", a pair of hands
   over "I take every insurer", a sunburst over "I treat you as a person". Each
   one is now the sentence it sits above: a dial with no hands on it, a shield
   with a tick in it, and a person.
   ────────────────────────────────────────────────────────────────────────── */

.vals {
  background: var(--ground);
  /* The icon size, and with it where the line runs: the wave is centred on
     the icons, so the two must come from the same number or they drift
     apart at some viewport width. */
  --val-ico: clamp(3.75rem, 6vw, 5rem);
}

/* ── The line behind them ──────────────────────────────────────────────────
   In the Framer file a single soft stroke runs the width of this row and
   threads through the three icons — cream on white, so it is a texture
   rather than a rule. It draws itself as the row is reached; js/values.js
   animates stroke-dashoffset from one to zero.

   preserveAspectRatio="none" lets the wave stretch to whatever the row is
   wide without redrawing it, and non-scaling-stroke keeps the line 4px
   through that stretch instead of smearing with it.
   ────────────────────────────────────────────────────────────────────────── */

/* The heading this section spent its life without. Centred, like the three
   it introduces — and like every other centred head on the page. */
.vals__head {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}


.vals__plot { position: relative; }

.vals__wave {
  position: absolute;
  left: 0;
  right: 0;
  /* Centred on the icons, which sit at the top of each column. */
  top: calc(var(--val-ico) / 2);
  width: 100%;
  height: clamp(4.5rem, 9vw, 7.5rem);
  transform: translateY(-50%);
  color: var(--cream);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* The line is drawn by default. js/values.js is what hides it — it measures
   the path and sets the dash from that — so with no script, or with less
   motion asked for, the line is simply there rather than missing. */

/* The icons and their words sit over it. */
/* Behind all three. Threading it over the middle icon was tried and it did
   not read as weaving — it read as the line cutting the shield in half. */
.val { position: relative; z-index: 1; }

.vals__row {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 46rem) {
  .vals__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.val {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 24rem;
  margin-inline: auto;
  text-align: center;
}

.val__ico {
  display: grid;
  place-items: center;
  width: var(--val-ico);
  aspect-ratio: 1;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--indigo);
}
/* Drawn larger, the stroke has to come down with it or the icons stop being
   line work and start being illustrations. */
.val__ico svg { width: 100%; height: 100%; stroke-width: 1.7; }

.val__name {
  margin: 0 0 0.6rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: var(--track-body);
  color: var(--ink);
  text-wrap: balance;
  /* The column centres its children, so a flex item sizes to its content and
     a single long word pushes past the column rather than wrapping in it.
     max-width pins it back; anywhere (not break-word) is what actually breaks
     a word that has no break opportunity of its own. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.val__text {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--fs-ui);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
  text-wrap: pretty;
}

.no-js .val { opacity: 1; transform: none; }