/* Arrival: the approved prototype composition (hairline, label, the five-letter wordmark, headline, one action), in front of a layered backdrop */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 128px var(--gut) 112px; overflow: hidden; }
.hero > .pm-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }
.hero .vline { width: 1px; height: 64px; background: linear-gradient(transparent, var(--line)); margin: 0 auto 40px; transform-origin: top; }
.hero .cap { margin-bottom: 48px; }
.hero .stage { position: relative; width: min(84vw, 1100px); will-change: transform; }
.hero .stage > svg:first-child { width: 100%; height: auto; overflow: visible; }
.hero .stage g.l { fill: var(--ink); }
.hero .stage .track { display: contents; }   /* the letters streak beyond the svg on purpose and the hero clips them; the unboxed track keeps them out of the overflow test */
.hero .base { position: absolute; left: 6%; right: 6%; bottom: -10px; height: 1px; background: var(--accent); opacity: .7; transform: scaleX(0); transform-origin: center; }
.hero .sel { position: absolute; border: 1px solid var(--accent); pointer-events: none; opacity: 0; }
.hero .sel b { position: absolute; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--accent); }
.hero .sel b:nth-child(1) { left: -5px; top: -5px; } .hero .sel b:nth-child(2) { right: -5px; top: -5px; }
.hero .sel b:nth-child(3) { left: -5px; bottom: -5px; } .hero .sel b:nth-child(4) { right: -5px; bottom: -5px; }
.hero .sel span { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--bg); font: 300 12px/1.6 var(--font-display); letter-spacing: .3em; text-transform: uppercase; padding: 4px 12px; }
.hero .stage > .cur { position: absolute; width: 20px; height: 20px; opacity: 0; pointer-events: none; }
.hero .fore { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.hero h1 { font-family: var(--font-display); font-weight: 200; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .5em; padding-left: .5em; line-height: 1.4; margin-top: 64px; color: var(--ink); min-width: 0; max-width: 100%; }
.hero .fr { margin-top: 10px; }
.hero .sub { color: var(--accent); min-width: 0; max-width: min(40ch, 100%); margin: 24px auto 0; font-size: 17px; text-wrap: balance; }
.hero .ctas { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.hero .ctas .a-btn { padding: 18px 34px; min-height: 56px; }
.hero .handoff { position: absolute; left: 50%; bottom: 0; width: 1px; height: 72px; background: linear-gradient(transparent, var(--line)); }
@media (max-width: 760px) {
  .hero { padding: 120px var(--gut) 96px; }
  .hero .vline { height: 48px; margin-bottom: 32px; }
  .hero .cap { margin-bottom: 40px; }
  .hero .stage { width: 100vw; }
  .hero h1 { font-size: 22px; letter-spacing: .26em; padding-left: .26em; max-width: min(300px, 100%); margin-top: 56px; }
  .hero .sub { max-width: min(30ch, 100%); font-size: 16px; }
  .hero .sel b { width: 7px; height: 7px; }
  .hero .sel span { letter-spacing: .14em; padding: 4px 8px; left: 0; transform: none; }
  .hero .ctas .a-btn { letter-spacing: .22em; }
}
.hero h1, .hero .sub, .hero .cap, .hero .fr,
.hero .w, .hero .w > span, .hero h1 span, .hero .sub span,
.hero .cap span, .hero .fr span, .hero .lbl,
#work .work-identity .work-project-copy, #work .work-identity .work-project-copy span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero .cap, .hero .fr,
.hero .w, .hero .w > span, .hero h1 span, .hero .sub span,
.hero .cap span, .hero .fr span, .hero .lbl,
#work .work-identity .work-project-copy, #work .work-identity .work-project-copy span { max-width: 100%; }
.hero .w, .hero .w > span, .hero h1 span, .hero .sub span,
.hero .cap span, .hero .fr span, .hero .lbl,
#work .work-identity .work-project-copy span { width: auto; }