/* hero · owner P1 · ported from _explore/object */
#hero { position: relative; min-height: max(620px, calc(100svh - var(--nav))); display: flex; align-items: center; overflow: clip; background: linear-gradient(180deg, #e6e6e6 0%, #dcdcdc 60%, #d4d4d4 100%); touch-action: pan-y pinch-zoom; }
#hero .hero__stage { position: absolute; inset: 0; }
#hero .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero .hero__still { --st-w: min(32vw, 54vh); --st-x: max(67.5%, calc((100% - min(100% - 2 * var(--m), var(--maxw))) / 2 + 7.2 * clamp(42px, 6.3vw, 116px) + 0.41 * var(--st-w) + 40px)); }
#hero .hero__still img { position: absolute; left: var(--st-x); top: 52%; width: var(--st-w); transform: translate(-50%, -50%); filter: drop-shadow(16px 16px 0 #6600ff); }
/* the still (no JS, no WebGL2, context lost) is composed like the GL frame: the edge passes between the arms,
   so the left arm and the foot of the V stay sharp while the long stroke sits in the frost. The tint lands on
   #d4d4d4 over the bottom 15 % of the hero, so the hand-off into #what has no seam. */
#hero .hero__pane { position: absolute; inset: 0 0 0 calc(var(--st-x) - 0.11 * var(--st-w)); background: linear-gradient(180deg, rgba(236, 236, 236, 0.55) 85%, rgba(212, 212, 212, 0.55)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%); }
#hero .hero__pane::before { content: ""; position: absolute; inset: 0; background: var(--v); clip-path: polygon(0 0, 15px 0, calc(22% + 15px) 100%, 22% 100%); }
#hero[data-gl] .hero__still { display: none; }
#hero .hero__copy { position: relative; z-index: 1; width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto; padding: 56px 0 72px; pointer-events: none; }
#hero .hero__copy a { pointer-events: auto; }
#hero .hero__title { font-size: clamp(42px, 6.3vw, 116px); max-width: 7.3em; }
#hero .hero__line { margin-top: clamp(22px, 2.4vw, 34px); max-width: 25em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: #1a1a1a; }
#hero .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 899px) {
  #hero { align-items: flex-start; min-height: max(700px, calc(100svh - var(--nav))); }
  #hero .hero__copy { padding-top: 28px; }
  /* portrait still, composed like the GL frame: the whole mark under the copy, the veil from below the buttons on
     the desktop diagonal (0.28 : 1) through the middle of the mark, so the left arm, the vertex and the start of
     the stroke stay sharp and only the stroke's upper end is frosted. The pane starts at 46 %, the mark's centre
     sits at 68 %, so the edge is 22 % of the stage height above the centre at the pane's top and 32 % below it
     at the bottom (cqh = 1 % of the stage; the first clip-path is the same thing for a 390 x 844 phone). */
  #hero .hero__still { --st-w: min(56vw, 30svh); --st-x: calc(50% + 0.06 * var(--st-w)); }
  #hero .hero__still img { top: 68%; }
  #hero .hero__pane { inset: 46% 0 0 0; background: linear-gradient(180deg, rgba(236, 236, 236, 0) 0, rgba(236, 236, 236, 0.55) 64px, rgba(236, 236, 236, 0.55) 72%, rgba(212, 212, 212, 0.55));
    clip-path: polygon(calc(var(--st-x) - 12.2%) 0, 100% 0, 100% 100%, calc(var(--st-x) + 17.7%) 100%); }
  #hero .hero__pane::before { clip-path: polygon(calc(var(--st-x) - 12.2%) 0, calc(var(--st-x) - 12.2% + 9px) 0, calc(var(--st-x) + 17.7% + 9px) 100%, calc(var(--st-x) + 17.7%) 100%); }
  @supports (width: 1cqh) {
    #hero .hero__stage { container-type: size; }
    #hero .hero__pane { clip-path: polygon(calc(var(--st-x) - 6.16cqh) 0, 100% 0, 100% 100%, calc(var(--st-x) + 8.96cqh) 100%); }
    #hero .hero__pane::before { clip-path: polygon(calc(var(--st-x) - 6.16cqh) 0, calc(var(--st-x) - 6.16cqh + 9px) 0, calc(var(--st-x) + 8.96cqh + 9px) 100%, calc(var(--st-x) + 8.96cqh) 100%); }
  }
}
html.motion #hero .hero__copy { will-change: transform, opacity; }