/* Homepage: hero, focus areas, contact call-to-action. */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero .wrap {
  position: relative; display: grid; gap: var(--s-5);
  padding-top: clamp(var(--s-5), 8vw, var(--s-6));
  padding-bottom: clamp(var(--s-5), 10vw, var(--s-6));
}
@media (min-width: 1080px) { .hero .wrap { grid-template-columns: 1fr 1.1fr; align-items: center; } }

.hero h1 { font-size: clamp(var(--t-h2), 7vw, var(--t-h1)); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.hero h1 em { font-style: normal; }
.hero .role { margin-top: var(--s-2); font-size: clamp(var(--t-lg), 2.6vw, var(--t-h3)); letter-spacing: -0.015em; }
.hero .highlights { margin-top: .25rem; font-size: var(--t-ui); color: var(--text-2); }
.rotator { display: inline-grid; clip-path: inset(0 -.25em); color: var(--accent); }
.rotator > span { grid-area: 1 / 1; }
.js .rotator > span { transition: transform .4s var(--ease), opacity .4s var(--ease); }
.js .rotator > span:not(.on) { transform: translateY(100%); opacity: 0; }
.js .rotator > span.out { transform: translateY(-100%); }
.hero .status { margin-top: var(--s-3); }
.hero .tagline { margin-top: var(--s-4); max-width: 34rem; line-height: 1.618; color: var(--text-2); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.hero .actions .link { margin-inline: var(--s-1); font-size: var(--t-ui); }
@media (max-width: 479px) { .hero .actions .link { margin-inline: 0; } }

/* focus areas: label column + two-column list of peers */
.focus { display: grid; gap: var(--s-4) var(--s-5); list-style: none; padding: 0; }
@media (min-width: 640px) { .focus { grid-template-columns: 1fr 1fr; } }
.focus h3 { font-size: var(--t-base); font-weight: 600; margin-bottom: .3rem; }
.focus p { font-size: var(--t-sm); color: var(--text-2); }

/* hero copy rises in once per visit */
@media (prefers-reduced-motion: no-preference) {
  .intro .hero-copy > * { opacity: 0; animation: rise .7s var(--ease) forwards; }
  .intro .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .intro .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .intro .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .intro .hero-copy > :nth-child(5) { animation-delay: .32s; }
  .intro .hero-copy > :nth-child(6) { animation-delay: .4s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }