/* stage */
.stage{position:relative;min-height:clamp(440px,calc(62svh - 40px),600px);background:var(--hero-bg);overflow:hidden;container-type:inline-size;container-name:stage;display:flex;flex-direction:column}
.m{display:block;overflow:hidden;line-height:0;padding:.08em .1em .12em;margin:-.08em -.1em -.12em}
.m.loose{padding:.3em .2em .25em;margin:-.3em -.2em -.25em}
.l{display:inline-block;vertical-align:top;line-height:1.2;will-change:transform;max-width:100%}
.sub .l{line-height:1.15}
.st{font-family:var(--f-stmt);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;color:var(--ink);white-space:nowrap}
.brm{display:none}
.ember{color:var(--ember)}

/* story layer */
.story{display:none;position:absolute;inset:0;z-index:2;pointer-events:none}
.story-play .story{display:block}
.story-play .sc{opacity:0}
.sc{position:absolute;inset:0;max-width:1240px;margin-inline:auto;padding-inline:var(--gut);display:flex;flex-direction:column;justify-content:center}
.ctr{align-items:center;text-align:center}
#s1 .st{font-size:clamp(44px,12.5cqi,168px)}
.punch{font-family:var(--f-voice);font-style:italic;font-size:clamp(24px,3.8cqi,54px);line-height:1.1;color:var(--grey);margin-top:.5em}
.row{display:flex;align-items:baseline;gap:.24em;font-size:clamp(44px,11cqi,150px)}
.row .st{font-size:1em}
.slot{display:grid}
.stage>.wrap{width:100%}
.slot>.m{grid-area:1/1}
.slot{text-align:right}
.m.wide{padding-left:.6em;margin-left:-.6em}
#v2{transform-origin:20% 90%}
#v4{transform-origin:right bottom}
.gz{color:var(--blue)}
#aw{margin-top:.35em}
#s4 .a{font-size:clamp(30px,6cqi,84px)}
#uni{font-size:clamp(48px,14cqi,220px);color:var(--ember);transform-origin:left bottom;line-height:.84}
.ch{display:inline-block}
#s4 .m+.m{margin-top:.02em}
.kick{font-family:var(--f-voice);font-style:italic;font-weight:400;font-size:clamp(22px,3cqi,40px);line-height:1.1;color:var(--grey);margin-bottom:.25em;white-space:nowrap}
.h1wrap{position:relative}
.kickpos{display:none;position:absolute;left:0;bottom:calc(100% + 10px)}
.story-play .kickpos{display:block}
.sub{display:grid}
.sub>.m{grid-area:1/1;align-self:start}
.fem{display:none}
.story-play .fem{display:block}
#fe{color:var(--grey)}
#h1a,#h1b{transform-origin:left bottom}

/* permanent hero */
.hero-in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(56px,6vw,88px) clamp(48px,5vw,72px);width:100%}
.h1{margin:0;font-size:clamp(38px,8cqi,124px)}
.h1 .st{font-size:1em}
.plus{color:var(--blue);display:inline-block;transform-origin:50% 60%}
.sub{margin:.55em 0 0;font-family:var(--f-voice);font-style:italic;font-size:clamp(22px,3cqi,40px);line-height:1.15;color:var(--ink)}
.sub .l{white-space:normal}
/* the buttons sit centred under the subline; the H1 and subline keep their own alignment */
.m.loose.hctam{margin-top:calc(clamp(28px,3.6cqi,48px) - .3em)}
#hcta{display:flex;width:100%;justify-content:center}
.skip{position:absolute;right:var(--gut);bottom:20px;z-index:3;font:600 13px/1 var(--f-stmt);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer}
.skip:hover{border-color:var(--ink)}

/* initial hidden state while the story runs (animations take over) */
.story-play .hero-in .l{transform:translateY(160%)}
.story-play .plus{transform:scale(0)}

/* mobile composition */
@container stage (max-width:640px){
  .brm{display:block}
  .row{font-size:15cqi}
  #s4 .a{font-size:9cqi}
  #s4 .a2{font-size:11.5cqi}
  .h1{font-size:10cqi}
  .skip{bottom:auto;top:16px}
  .sc{justify-content:flex-start;padding-top:104px}
  .hero-in{justify-content:flex-start;padding-top:104px}
}