/* Home: warm, pastoral. A dotted trail runs down the page; each section is a stop with a sign. */
.trail { --spine-x: 28px; --gutter: var(--s-6); }
.trail-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.trail-wrap::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gutter) + var(--spine-x) - 1.5px); border-left: 3px dotted #b7a5d3;
}
.stop { position: relative; padding: var(--s-16) 0 var(--s-16) 88px; }
.stop::before {
  content: ""; position: absolute; top: 76px; left: calc(var(--spine-x) - 11px);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 4px solid var(--brand);
}
.stop--start::before { top: 88px; background: var(--brand); }
@media (max-width: 720px) {
  .trail { --spine-x: 14px; --gutter: var(--s-4); }
  .stop { padding: var(--s-12) 0 var(--s-12) 44px; }
  .stop::before { top: 58px; }
  .stop--start::before { top: 68px; }
}

.sign {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  background: var(--brand); color: #fff; border-radius: 6px 999px 999px 6px;
  font-weight: 800; font-size: 0.95rem; margin-bottom: var(--s-6);
}
.sign--light { background: #fff; color: var(--brand); }

/* Hero */
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s-16); align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } }
.hero h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; max-width: 15ch; }
.lede { margin-top: var(--s-6); font-size: 1.3rem; line-height: 1.55; max-width: 40ch; }
.actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.note { margin-top: var(--s-6); color: var(--muted); font-size: var(--step--1); max-width: 46ch; }
.waypost { margin: 0; }
.waypost svg { width: 100%; height: auto; border-radius: var(--radius); }
.waypost figcaption { margin-top: var(--s-4); font-size: var(--step--1); color: var(--muted); max-width: 34ch; }
@media (max-width: 900px) { .waypost { max-width: 340px; } }

/* Why */
.why-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-12); }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.why h2 { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; max-width: 12ch; }
.letter p { font-size: 1.2rem; line-height: 1.75; max-width: 58ch; }
.letter p + p { margin-top: var(--s-6); }

/* Mission band */
.band { background: var(--brand); color: #fff; padding: var(--s-24) 0; position: relative; z-index: 1; }
.band .wrap { padding-left: calc(var(--s-6) + 88px); }
@media (max-width: 720px) { .band { padding: var(--s-16) 0; } .band .wrap { padding-left: calc(var(--s-4) + 44px); } }
.band h2 { color: #fff; font-size: var(--step-3); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; max-width: 20ch; }

/* Values */
.values h2 { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--s-8); }
.value { display: grid; grid-template-columns: 230px 1fr; gap: var(--s-8); padding: var(--s-8) 0; border-top: 1px solid var(--rule); }
.value:last-child { border-bottom: 1px solid var(--rule); }
.value dt { font: 800 var(--step-2)/1.1 var(--font-display); letter-spacing: -0.02em; }
.value dd { font-size: 1.15rem; line-height: 1.7; max-width: 58ch; }
@media (max-width: 720px) { .value { grid-template-columns: 1fr; gap: var(--s-3); } }

/* Closing step: one action */
.next { max-width: 58ch; }
.next h2 { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; }
.next p { margin-top: var(--s-4); font-size: 1.15rem; line-height: 1.7; }
.next .actions { margin-top: var(--s-6); }
.next .entity { margin-top: var(--s-8); font-size: var(--step--1); color: var(--muted); }
.next .entity a { font-weight: 700; color: var(--ink); }