/* Extend the outcome-led homepage without changing the shared portfolio. */
.homepage .hero { min-height: auto; padding-block: clamp(3.5rem, 7vw, 7rem); }
.homepage .hero__grid { grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 0.65fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.homepage .hero h1 { font-size: clamp(2.5rem, calc(0.85rem + 4.4vw), 5.5rem); letter-spacing: -0.06em; line-height: 1.04; overflow-wrap: break-word; hyphens: manual; }
.homepage .hero__intro { max-width: 42rem; }
.hero__context { max-width: 40rem; margin: 1.1rem 0 0; color: var(--muted); }
.homepage .hero__panel { min-height: 23rem; transform: none; }
.homepage .hero__panel::after { width: 2.25rem; height: 2.25rem; }
.homepage .hero__panel-list { margin: 2rem 0; }
.homepage .hero__panel-meta { max-width: 18rem; padding-right: 2rem; }
.homepage .section-heading h2 { max-width: 20ch; }
.homepage .principle h3 { margin-top: 2rem; }
.homepage section[id] { scroll-margin-top: 6rem; }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.outcome { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--paper); }
.outcome .eyebrow { font-size: 0.65rem; letter-spacing: 0.08em; }
.outcome .eyebrow::before { width: 1rem; }
.outcome h3 { margin: 0.75rem 0 1rem; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.04em; line-height: 1.15; }
.outcome p:not(.eyebrow) { color: var(--muted); }
.outcome .outcome__aim { border-top: 1px solid var(--line); margin-top: auto; padding-top: 1.25rem; }
.outcome__aim strong { color: var(--green); }
.outcome a { margin-top: 1rem; font-size: 0.85rem; text-underline-offset: 0.2em; }
.homepage .profile__image { margin: 0; }

@media (max-width: 64rem) {
  .homepage .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .homepage .hero h1 { max-width: 22ch; }
  .homepage .hero__panel { width: 100%; min-height: auto; }
  .homepage .hero__panel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
  .homepage .hero__panel-meta { max-width: 32rem; }
  .outcomes { grid-template-columns: minmax(0, 1fr); }
  .outcome .outcome__aim { margin-top: 1rem; }
}

@media (max-width: 48rem) {
  .homepage .hero h1 { font-size: clamp(2.5rem, calc(0.8rem + 6vw), 4rem); }
  .homepage .hero__panel-list { grid-template-columns: minmax(0, 1fr); }
  .homepage .section-heading h2 { line-height: 1.04; }
  .homepage .profile__image { min-height: 24rem; }
}