/* Vision page — builds on the tokens and components in site.css */
.v-hero { padding-top: clamp(120px, 14vw, 200px); }
.v-hero h1 { font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.04em; max-width: 18ch; margin-top: 18px; }
.v-lead { margin-top: 28px; max-width: 60ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); }

.v-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.v-split .section-head { margin-bottom: 0; }
.v-text p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }
.v-text strong { color: var(--ink); font-weight: 600; }

.v-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.v-road li { padding: 28px 24px 8px 0; border-right: 1px solid var(--line); }
.v-road li + li { padding-left: 24px; }
.v-road li:last-child { border-right: 0; }
.v-stage { margin: 0 0 16px; }
.v-road h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; margin-bottom: 10px; }
.v-road p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.v-road strong { color: var(--ink); font-weight: 600; }

.v-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.v-principles li { padding: 24px 0; border-top: 1px solid var(--line-2); }
.v-principles h3 { font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 8px; }
.v-principles p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.v-cta { text-align: left; }
.v-cta .section-sub { margin: 16px 0 32px; }
.v-ghost { color: var(--dark-ink); border-color: var(--dark-line); }
.v-ghost:hover { border-color: var(--dark-ink); }
.nav a[aria-current="page"] { color: var(--accent); }

@media (max-width: 1080px) {
  .v-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-road li:nth-child(2) { border-right: 0; }
  .v-road li:nth-child(3) { padding-left: 0; }
}
@media (max-width: 760px) {
  .v-split, .v-principles { grid-template-columns: minmax(0, 1fr); }
  .v-road { grid-template-columns: minmax(0, 1fr); }
  .v-road li, .v-road li + li { padding: 24px 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
}