/* ---------- Why Aurum (BRIEF 5.9): editorial columns, no boxes ---------- */
.values.pad{padding-top:clamp(1.75rem,3vw,2.75rem);padding-bottom:clamp(5rem,9vw,8rem)} /* less above, more before the Journey band (Laurie) */
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;list-style:none}
.val{border-top:1px solid var(--line);padding-top:1.8rem}
.val h3{font-size:1.6rem;color:var(--cream);margin-bottom:.8rem}
.val p{color:var(--muted);font-size:.9375rem;line-height:1.7}
@media(max-width:960px){ .val-grid{grid-template-columns:repeat(2,1fr);gap:2.6rem 2.4rem} }
@media(max-width:640px){ .val-grid{grid-template-columns:1fr;gap:2rem} .val{padding-top:1.4rem} }

/* ---------- The Journey (BRIEF 5.10): feature band with scroll-linked timeline ---------- */
.steps-wrap{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;list-style:none;counter-reset:step}
.step{position:relative;z-index:1;padding-top:5.1rem;counter-increment:step}
.step::before{content:"0" counter(step);position:absolute;top:0;left:0;font-family:var(--serif);font-size:2.8rem;line-height:1;
  color:color-mix(in srgb,var(--gold-display) 42%,transparent);transition:color .45s var(--ease)}
.step h3{font-size:1.45rem;color:var(--cream);margin-bottom:.6rem}
.step p{color:var(--cream-dim);font-size:.9375rem;max-width:30ch}
/* track sits clear of the numerals (BRIEF 7: line ~3.95rem down, steps padded 5.1rem) */
.steps-line{position:absolute;z-index:0;top:3.95rem;left:0;right:0;height:2px;border-radius:2px;background:color-mix(in srgb,var(--gold-display) 22%,transparent)}
.steps-line span{position:absolute;inset:0;border-radius:2px;background:var(--gold-display);transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
.step::after{content:"";position:absolute;top:calc(3.95rem - 4.5px);left:0;width:11px;height:11px;border-radius:50%;
  background:var(--band-solid);border:2px solid color-mix(in srgb,var(--gold-display) 50%,transparent);transition:background .45s var(--ease),border-color .45s var(--ease)}
.step.active::before{color:var(--gold-display)}
.step.active::after{background:var(--gold-display);border-color:var(--gold-display)}
@media(max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr);gap:2.6rem 2rem}
  .steps-line,.step::after{display:none}
  .step{padding-top:3.6rem}
  .step::before{color:var(--gold-display)}
}
@media(max-width:640px){
  .steps{grid-template-columns:1fr;gap:2.2rem}
  /* Phones: the timeline runs down the right-hand side, a dot beside each numeral, filling as you scroll (js/main.js) */
  .steps-line{display:block;top:0;bottom:0;left:auto;right:4px;width:2px;height:auto}
  .steps-line span{transform:scaleY(0);transform-origin:top}
  .step{padding-right:2.6rem}
  .step::before{color:color-mix(in srgb,var(--gold-display) 42%,transparent)}
  .step::after{display:block;top:calc(1.4rem - 5.5px);left:auto;right:-0.5px}
}
@media(prefers-reduced-motion:reduce){ .steps-line span{transition:none;transform:none} .step::before{color:var(--gold-display)} .step::after{background:var(--gold-display);border-color:var(--gold-display)} }