/* Mission & Educational Model: composition using the shared foundation. */
.mission-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--layout-gap); align-items: center; }
.mission-hero h1 { font-size: clamp(2.375rem, 4vw, 4rem); }
.mission-hero-layout .lead { margin-top: var(--space-4); max-width: 48ch; }
.principles-section { --line: var(--line-on-dark); --muted: var(--muted-on-dark); background: var(--dark); color: var(--on-dark); }
.principles-section .section-label { color: var(--muted-on-dark); }
.education-icon { display: block; width: 2rem; height: 2rem; flex: 0 0 auto; }
.framework-grid { gap: var(--space-2); }
.framework-card { border: 1px solid var(--line); padding: clamp(1.25rem, 2vw, 2rem); background: #152d44; }
.framework-card-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.framework-card .education-icon { color: var(--gold); }
.framework-card:nth-child(even) .education-icon { color: var(--muted-on-dark); }
.framework-card .principle-number { font-size: var(--type-small); letter-spacing: .08em; }
.framework-card h3 { margin-top: var(--space-4); }
.framework-card p { max-width: 32ch; }
.editorial-note { border-left: 2px solid var(--accent); padding-left: var(--space-3); margin-top: var(--space-4); max-width: 64ch; }
.delivery-section { background: var(--surface); border-block: 1px solid var(--line); }
/* Native, ordered pathways: connectors indicate reading order without adding tab stops. */
.process-flow { --marker-size: 3.75rem; --flow-gap: var(--space-4); --flow-columns: 4; container: mission-process / inline-size; list-style: none; display: grid; grid-template-columns: repeat(var(--flow-columns), minmax(0, 1fr)); gap: var(--flow-gap); margin: var(--space-5) 0 0; padding: 0; }
.process-step { position: relative; min-width: 0; }
.process-marker { position: relative; display: grid; place-items: center; width: var(--marker-size); height: var(--marker-size); border: 1px solid var(--accent); border-radius: 50%; color: var(--ink); background: var(--paper); }
.process-copy { min-width: 0; margin-top: var(--space-3); }
.process-copy > .eyebrow, .support-step-number { display: block; color: var(--accent); margin-bottom: var(--space-2); }
.process-copy > p { color: var(--muted); margin-top: var(--space-2); }
.process-connector { position: absolute; top: calc(var(--marker-size) / 2); left: calc(var(--marker-size) + .75rem); width: calc(100% + var(--flow-gap) - var(--marker-size) - 1.5rem); border-top: 1px solid var(--accent); }
.process-connector::after { content: ""; position: absolute; width: .4rem; height: .4rem; top: -.25rem; right: 0; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); }
.guidance-block { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.guidance-block > h3 { font-size: var(--type-compact); max-width: 28ch; line-height: 1.2; }
.support-pathway { --flow-columns: 3; }
.support-pathway .process-marker { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.support-step-number { font-size: var(--type-small); letter-spacing: .08em; }
.process-copy > h4 { margin: 0; font-size: var(--type-card); font-weight: 450; letter-spacing: -.025em; line-height: 1.3; overflow-wrap: break-word; }
.standards-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--line); }
.standards-list li { font-size: var(--type-small); color: var(--accent); }
.closing-section { background: var(--surface-warm); }
.closing-inner { max-width: 1100px; }
.closing-inner > .eyebrow { color: var(--accent); margin-bottom: var(--space-4); }
.closing-inner h2 { max-width: 24ch; }
.closing-inner > p:not(.eyebrow) { margin-top: var(--space-4); max-width: 58ch; color: var(--muted); }
.closing-inner .button { margin-top: var(--space-4); max-width: 100%; }
.closing-inner .button span { flex: 0 0 auto; }
@media (max-width: 1100px) {
  .process-flow { grid-template-columns: minmax(0, 1fr); }
  .process-step { display: grid; grid-template-columns: var(--marker-size) minmax(0, 1fr); gap: var(--space-3); }
  .process-copy { margin-top: 0; }
  .process-copy > p { max-width: 65ch; }
  .process-connector { top: calc(var(--marker-size) + .5rem); bottom: calc(-1 * var(--flow-gap) + .5rem); left: calc(var(--marker-size) / 2); width: 0; border-top: 0; border-left: 1px solid var(--accent); }
  .process-connector::after { top: auto; right: auto; left: -.25rem; bottom: 0; transform: rotate(135deg); }
}
@media (max-width: 900px) {
  .mission-hero-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .process-step { gap: var(--space-2); }
}
@media (max-width: 520px) {
  .framework-card { padding: var(--space-3); }
  .process-flow { --marker-size: 3rem; }
  .process-marker .education-icon { width: 1.5rem; height: 1.5rem; }
}
/* Give enlarged text the full row when a side rail would make reading too narrow. */
@container mission-process (max-width: 18rem) {
  .process-step { display: block; }
  .process-copy { margin-top: var(--space-3); }
  .process-connector { position: relative; display: block; top: auto; bottom: auto; height: var(--space-4); margin-top: var(--space-3); }
}