/* NovaVantix home: the film.
   The plain rules lay everything out flat, so the page reads with no script and on a canvas board.
   Rules under .nv-live turn the same markup into the pinned, scrolling film. */

main{display:block}
.proof,.parts,.not,.price,.print,.how,.ask,.nv-plinth,.fin{position:relative;z-index:4}

/* I. the opening */
.hero{position:relative;height:calc(var(--vh)*100);overflow:hidden;background:var(--saffron);color:var(--hero-fg,var(--ink));transition:color .55s linear;z-index:1}
.hero{--plate-y:100%}
.hero .nv-plate img{object-position:50% var(--plate-y)}
.hero__set{position:absolute;inset:0;transform-origin:var(--ox,62%) var(--oy,44%);will-change:transform}
.hero__cut{pointer-events:none}
.tint{background-position:50% var(--plate-y);background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .7s linear;pointer-events:none}
.tint.is-on{opacity:1}
.hero__h1{position:absolute;left:calc(var(--gut) - .6vw);top:calc(var(--nav-h) + .4vw);font-size:min(20.5vw,calc(var(--vh)*46));line-height:.92;letter-spacing:-.024em;white-space:nowrap;will-change:transform,opacity}
.hero__br{display:none}
.hero__h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .05em .2em 0;margin:-.05em -.05em -.2em 0}
.hero__h1 .w>span{display:inline-block;animation:rise 1.25s var(--ease) both}
.hero__h1 .w:nth-child(2)>span{animation-delay:.09s}
.hero__h1 .w:nth-child(3)>span{animation-delay:.18s}
@keyframes rise{from{transform:translateY(106%)}to{transform:none}}
.hero__glint{pointer-events:none;mix-blend-mode:screen;opacity:0;-webkit-mask-image:linear-gradient(112deg,transparent 42%,#000 50%,transparent 58%);mask-image:linear-gradient(112deg,transparent 42%,#000 50%,transparent 58%);-webkit-mask-size:320% 100%;mask-size:320% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;animation:glint 1.9s .85s cubic-bezier(.45,.05,.3,1) both}
@keyframes glint{0%{opacity:0;-webkit-mask-position:108% 0;mask-position:108% 0}18%{opacity:.85}82%{opacity:.85}100%{opacity:0;-webkit-mask-position:-8% 0;mask-position:-8% 0}}
.hero__foot{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 4px);width:min(44vw,720px);will-change:opacity}
.hero__say{font-family:var(--serif);font-size:var(--d4);line-height:1.04;letter-spacing:-.012em;max-width:11.4em}
.hero__for{margin-top:10px;font-size:16px;line-height:1.8;max-width:42em;--pick-on:var(--hero-pick,var(--bone))}
.hero__pay-s{display:none}
.hero__pay{position:absolute;right:var(--gut);bottom:calc(var(--gut) + 6px);display:flex;flex-direction:column;align-items:flex-end;gap:14px;will-change:opacity}
.hero__price{font-family:var(--serif);font-size:clamp(24px,2vw,34px);line-height:1.08;letter-spacing:-.01em;text-align:right}
.hero__scale{position:absolute;left:0;top:0;transform:translate(var(--nx,70vw),var(--ny,calc(var(--vh)*84)));margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.55vw,24px);line-height:1;white-space:nowrap;will-change:opacity;transition:color .55s linear}
.hero__scale::after{content:"";position:absolute;left:calc(100% + 8px);top:.58em;width:clamp(16px,1.7vw,26px);height:1px;background:currentColor}
.hero__cv{display:none}

/* the studio follows the picker */
.hero[data-studio=rent-a-car],.hero[data-studio=weddings],.hero[data-studio=tuition]{--hero-fg:var(--bone);--hero-pick:var(--ink)}
.hero[data-studio=rent-a-car] .nv-btn,.hero[data-studio=weddings] .nv-btn,.hero[data-studio=tuition] .nv-btn{background:var(--bone);color:var(--ink)}
.hero[data-studio=rent-a-car] .nv-btn:hover,.hero[data-studio=weddings] .nv-btn:hover,.hero[data-studio=tuition] .nv-btn:hover{background:#fff}

/* II. the crease. the directions wind round the edge of the screen */
.crease{position:relative;height:calc(var(--vh)*100);overflow:hidden;color:var(--bone);background:#0C1D82;--edge:min(9.4vw,calc(var(--vh)*15));--in:calc(var(--gut)*.7)}
.crease .nv-plate img{object-position:50% 50%}
.crease::after{content:"";position:absolute;inset:0;background:rgba(6,14,70,.34)}
.edge,.crease__h,.crease__end{z-index:1}
.edge{position:absolute;inset:0;font-family:var(--serif);font-size:var(--edge);line-height:1;letter-spacing:-.018em;pointer-events:none}
.edge__run{position:absolute;display:block;white-space:nowrap;transform-origin:0 0;overflow:hidden;padding-bottom:.14em}
.edge__run b{display:block;font-weight:400;will-change:transform}
.edge__run--t{left:var(--in);top:var(--in)}
.edge__run--r{left:calc(100% - var(--in));top:var(--in);transform:rotate(90deg)}
.edge__run--b{left:calc(100% - var(--in));top:calc(100% - var(--in));transform:rotate(180deg)}
.edge__run--l{left:var(--in);top:calc(100% - var(--in));transform:rotate(270deg)}
.crease__h{position:absolute;left:0;right:0;top:calc(var(--edge) + 4%);text-align:center;font-size:min(6.2vw,calc(var(--vh)*10.4));line-height:1.04;padding:0 calc(var(--edge)*1.3);will-change:opacity,transform}
.crease__end{position:absolute;left:0;right:0;bottom:calc(var(--edge) + 5%);display:flex;flex-direction:column;align-items:center;gap:.4em;padding:0 calc(var(--edge)*1.3);text-align:center;will-change:opacity}
.crease__place{font-family:var(--serif);font-size:min(6.2vw,calc(var(--vh)*10.4));line-height:1.04;letter-spacing:-.018em}
.crease__sub{font-family:var(--serif);font-style:italic;font-size:var(--d4);line-height:1.1}

/* III. one day, shot from one spot */
.day{position:relative;z-index:2;background:var(--sapphire)}
.day__stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--sapphire)}
.frame{position:relative;height:62.5vw;overflow:hidden;color:var(--ink)}
.frame[data-tone=bone]{color:var(--bone)}
.frame .nv-plate{width:400%;max-width:none;left:calc(var(--i)*-100%)}
.frame .nv-plate img{max-width:none;object-position:50% 0}
.frame--night{background:var(--sapphire)}
.frame__h{position:absolute;left:var(--gut);right:14px;top:calc(var(--nav-h) + 1vw);font-size:clamp(40px,5vw,88px);line-height:1.02;letter-spacing:-.018em}
.frame__t{position:absolute;right:var(--gut);bottom:var(--gut);font-family:var(--mono);font-size:13px;line-height:1;letter-spacing:.01em}
.hears{grid-column:1/-1;position:relative;display:flex;flex-direction:column;gap:.06em;padding:calc(var(--vh)*9) var(--gut);background:var(--sapphire);color:var(--bone);font-family:var(--serif);font-size:clamp(46px,7.1vw,128px);line-height:1.06;letter-spacing:-.016em}
.hears__s{display:block;will-change:opacity,transform}
.hears__s--last{font-weight:700}
.hears__in{display:inline-block;vertical-align:baseline}
.hears__in input{font-family:var(--serif);font-size:inherit;line-height:1;letter-spacing:inherit;color:var(--bone);width:7.4em;max-width:calc(100vw - 2*var(--gut));field-sizing:content;min-width:3em;padding:0 .04em;border-bottom:2px solid var(--bone-2);transition:border-color .2s linear,background .2s linear}
@supports (field-sizing:content){.hears__in input{width:auto}}
.hears__in input::placeholder{color:var(--bone);opacity:.62}
.hears__in input:hover{border-bottom-color:var(--bone)}
.hears__in input:focus{outline:0;border-bottom-color:var(--saffron)}

/* IV. the sentence: the owner on the left in Caslon, NovaVantix answering on the right, heavier */
.said{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--vh)*100);padding:calc(var(--nav-h) + 2px) var(--gut) calc(var(--gut) - 6px);background:linear-gradient(var(--saffron),var(--marigold));--s:min(15.4vw,calc(var(--vh)*21.4))}
.said__h{font-size:var(--s);line-height:.985;letter-spacing:-.022em}
.said__you,.said__we{display:block}
.said__you{margin-left:-.02em}
.said__we{font-weight:700;letter-spacing:-.03em;text-align:right;margin-top:.02em;margin-right:-.01em}
.said__not{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 4px);width:min(21em,30vw);font-size:16px;line-height:1.8}

/* V. the proof: five walls of one studio, no two hung alike */
.wall{position:relative;overflow:hidden;height:calc(var(--vh)*100);min-height:620px;color:var(--wall-fg);isolation:isolate;background:radial-gradient(52% 26% at 60% 100%,rgba(255,255,255,.13),transparent 74%),linear-gradient(var(--wall) 34%,var(--wall-floor))}
.wall__line{font-size:clamp(58px,8.4vw,150px);line-height:1.03;letter-spacing:-.02em}
.wall__line span{display:block}
.wall__note{display:flex;align-items:flex-end;gap:clamp(20px,2.2vw,34px)}
.wall__go{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.wall .nv-go{color:var(--wall-fg)}
.proof__say{color:var(--wall-fg);font-family:var(--mono);font-weight:400;letter-spacing:.01em}
.wall__man{--man:clamp(58px,calc(var(--vh)*9.6),96px)}

/* the first wall: the line stands left, the site hangs right and runs off the edge */
.wall--a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto minmax(0,1fr) auto;padding:calc(var(--nav-h) + var(--vh)*1.2) 0 calc(var(--gut) + 6px) var(--gut);column-gap:clamp(36px,4.6vw,72px)}
.wall--a .proof__say{grid-column:1;grid-row:1}
.wall--a .wall__line{grid-column:1;grid-row:2;align-self:start;margin-top:calc(var(--vh)*2.6);font-size:min(8.7vw,calc(var(--vh)*15.4));white-space:nowrap}
.wall--a .wall__note{grid-column:1;grid-row:3}
.wall--a .nv-view{grid-column:2;grid-row:1/4;margin-bottom:calc(var(--vh)*8 - var(--gut))}
.wall--a .wall__man{left:39.6%;bottom:calc(var(--vh)*3.6)}

/* the second: the line breaks round the site. booked, then a long way to go, then not */
.wall--b{display:grid;grid-template-columns:minmax(0,22fr) minmax(0,78fr);grid-template-rows:auto minmax(0,1fr) auto;padding:calc(var(--nav-h) - 8px) var(--gut) calc(var(--gut) - 4px);column-gap:clamp(24px,3vw,44px);row-gap:calc(var(--vh)*1.4)}
.wall--b .wall__line{display:contents}
.wall--b .wall__l1,.wall--b .wall__l2{font-family:var(--serif);font-size:min(8.3vw,calc(var(--vh)*14));line-height:1.03;letter-spacing:-.02em}
.wall--b .wall__l1{grid-column:1/-1;grid-row:1}
.wall--b .wall__l2{grid-column:1/-1;grid-row:3;justify-self:end}
.wall--b .nv-view{grid-column:2;grid-row:2;margin-right:calc(var(--gut)*-1)}
.wall--b .wall__note{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;gap:16px}
.wall--b .wall__man{left:calc(var(--gut) + 8.4vw);bottom:calc(var(--gut) + var(--vh)*1)}

/* the third: an invitation. centred, with the card in the middle of the sentence */
.wall--c{display:grid;grid-template-columns:minmax(0,1fr) min(32vw,calc(var(--vh)*51)) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);padding:calc(var(--vh)*5) var(--gut) calc(var(--vh)*5);column-gap:clamp(26px,3vw,48px)}
.wall--c .wall__line{display:contents}
.wall--c .wall__big{font-family:var(--serif);font-size:min(6.5vw,calc(var(--vh)*11.6));line-height:1.04;letter-spacing:-.02em;white-space:nowrap}
.wall--c .wall__big--a{grid-column:1;grid-row:2;justify-self:end}
.wall--c .wall__mid{grid-column:1;grid-row:3;justify-self:end;font-family:var(--serif);font-style:italic;font-size:var(--d4);line-height:1.12;margin-top:.14em}
.wall--c .wall__big--b{grid-column:3;grid-row:2}
.wall--c .nv-view{grid-column:2;grid-row:1/5}
.wall--c .wall__note{grid-column:3;grid-row:3/5;align-self:start;margin-top:calc(var(--vh)*2.4);flex-direction:column;align-items:flex-start;gap:14px}
.wall--c .wall__man{left:25%;bottom:calc(var(--vh)*3.8)}

/* the fourth: an exam paper, set beside the same site on a computer and on a phone */
.wall--d{display:grid;grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);grid-template-rows:minmax(0,1fr) auto;padding:calc(var(--vh)*7) var(--gut) calc(var(--gut) + 6px) 0;column-gap:clamp(64px,8.6vw,136px)}
.wall--d .view--wide{grid-column:1;grid-row:1/3;margin-bottom:calc(var(--vh)*7 - var(--gut))}
.wall--d .view--phone{position:absolute;left:calc(60% - 14vw);bottom:calc(var(--vh)*4);width:min(15.4vw,calc(var(--vh)*26));aspect-ratio:9/18.2;box-shadow:-10px 8px 0 rgba(21,16,10,.26);outline:5px solid var(--ink);outline-offset:0}
.wall--d .wall__line{grid-column:2;grid-row:1;align-self:center}
.wall--d .wall__part{font-size:min(12vw,calc(var(--vh)*21));line-height:1;letter-spacing:-.022em;padding-bottom:.1em}
.wall--d .wall__q{font-size:clamp(30px,3.4vw,58px);line-height:1.12;letter-spacing:-.014em;padding:.32em 0 .36em;border-top:1px solid var(--wall-rule)}
.wall--d .wall__q:last-child{border-bottom:1px solid var(--wall-rule)}
.wall--d .wall__note{grid-column:2;grid-row:2}

/* the fifth: noon stands the whole width of the wall, and the sum sits on the floor */
.wall--e{display:grid;grid-template-rows:minmax(0,1fr) auto;padding-top:var(--nav-h);background:linear-gradient(var(--wall),var(--wall-floor))}
.wall--e .nv-view{box-shadow:none}
.wall__floor{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:end;padding:calc(var(--vh)*2.6) var(--gut) calc(var(--gut) + 4px)}
.wall--e .wall__line{font-size:min(5.5vw,calc(var(--vh)*9));line-height:1.06}
.wall--e .wall__man{left:58%;bottom:calc(var(--gut) + var(--vh)*1.4)}

/* VI. seven parts. every part is in the air from the first frame; they close up as the list runs */
.parts{background:linear-gradient(#FFC597,#FF9069)}
.parts__stage{position:relative;overflow:hidden;min-height:calc(var(--vh)*100);padding:calc(var(--nav-h) + 8px) var(--gut) calc(var(--gut) + 10px)}
.parts__still{z-index:0}
.parts__still img{object-position:100% 50%}
.parts__cv,.parts__lead{display:none}
.parts__h,.parts__list,.parts__more{position:relative;z-index:1;width:min(42vw,700px)}
.parts__h{font-size:min(8.2vw,calc(var(--vh)*15));line-height:1.04}
.parts__seven,.parts__all{display:block}
.parts__all{font-weight:700;letter-spacing:-.026em;font-size:.62em;line-height:1.08;margin-top:.1em}
.parts__list{margin-top:calc(var(--vh)*2.4)}
.part{display:grid;grid-template-columns:1.32em minmax(0,1fr);font-size:clamp(26px,2.5vw,40px);padding:.26em 0 .3em;border-top:1px solid var(--rule-ink)}
.part__frag{display:none}
.part__n{font-family:var(--serif);line-height:1.1}
.part__t{font-size:1em;line-height:1.1;letter-spacing:-.012em}
.part__d{font-size:var(--t-body);line-height:1.42;margin-top:3px;max-width:34em}
.parts__more{margin-top:18px;font-size:var(--t-body);line-height:1.5}
.parts__more .nv-go{display:flex;width:max-content;margin-top:6px}

/* VII. what we will not promise */
.not{background:var(--bone);padding:calc(var(--vh)*5 + 14px) var(--gut) calc(var(--vh)*5)}
.not__h{font-size:var(--d3);margin-bottom:calc(var(--vh)*2.6)}
.not__i{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,3vw,48px);align-items:center;padding:.06em 0 .13em;border-top:1px solid var(--rule-ink);font-size:clamp(56px,7vw,126px)}
.not__i:last-child{border-bottom:1px solid var(--rule-ink)}
.not__w{font-family:var(--serif);line-height:1.1;letter-spacing:-.02em}
.not__w s{position:relative;display:inline-block;text-decoration:none;white-space:nowrap}
.not__w s::after{content:"";position:absolute;left:-.05em;right:-.05em;top:.58em;height:.05em;background:var(--ruby);transform:scaleX(var(--k,1));transform-origin:0 50%}
.not__d{font-size:var(--t-lede);line-height:1.4;letter-spacing:-.006em;max-width:27em}

/* VIII. the price */
.price{height:calc(var(--vh)*88);min-height:560px;overflow:hidden;background:var(--saffron)}
.price .nv-plate img{object-position:50% 100%}
/* the figure in steel, and under it the whole price as one line, the same line on every screen */
.price__line{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--vh)*3.4);font-family:var(--serif);font-weight:400;font-size:min(7.3vw,calc(var(--vh)*12.6));line-height:1.06;letter-spacing:-.016em;white-space:nowrap}
.price__line span{font-weight:700;letter-spacing:-.026em}

.print{background:linear-gradient(#FF9A10,var(--marigold));padding:calc(var(--vh)*2) var(--gut) calc(var(--vh)*3)}
.print__h{margin-bottom:calc(var(--vh)*2.4)}
.print__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.print__i{padding:.08em 0 .24em;border-top:1px solid var(--ink);font-size:clamp(46px,5.5vw,98px)}
.print__i dt{font-family:var(--serif);line-height:1.08;letter-spacing:-.02em}
.print__i dd{font-size:var(--t-lede);line-height:1.38;letter-spacing:-.006em;max-width:31em;margin-top:.45em}
.print__go{margin-top:calc(var(--vh)*2)}

/* IX. how it goes: five steps up out of the floor */
.how{background:var(--marigold);padding-top:calc(var(--vh)*2)}
.how__h{font-size:var(--d2);padding:0 var(--gut);position:relative;z-index:1}
.how__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;margin-top:calc(var(--d2)*-.9)}
.step{--rise:clamp(80px,calc(var(--vh)*9.2),100px);position:relative;display:flex;flex-direction:column;gap:6px;height:calc(var(--rise)*(var(--i) + 1.25));padding:14px clamp(12px,1.5vw,22px) 0;background:var(--plum);color:var(--bone);box-shadow:inset 0 2px 0 rgba(249,243,232,.2)}
.step:first-child{padding-left:var(--gut)}
.step__n{font-family:var(--serif);font-size:var(--d4);line-height:1}
.step__t{font-size:clamp(16px,1.4vw,21px);line-height:1.28;letter-spacing:-.006em;max-width:13.4em}

/* X. questions */
.ask{background:var(--plum);color:var(--bone);--q-rule:var(--rule-bone);padding:calc(var(--vh)*4) var(--gut) calc(var(--vh)*5)}
.ask__top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:calc(var(--vh)*3)}
.ask__h{font-size:var(--d3)}
.ask__note{font-size:var(--t-small);line-height:1.4;max-width:26em;text-align:right}

/* XI. the last line */
.fin{background:var(--ruby-deep);color:var(--bone);padding:calc(var(--vh)*5) var(--gut) calc(var(--vh)*5 + 6px)}
.fin__l{font-family:var(--serif);font-size:clamp(46px,6.2vw,112px);line-height:1.06;letter-spacing:-.018em;max-width:15em}
.fin__l span{font-weight:700;letter-spacing:-.024em;white-space:nowrap}

/* the reel: runs with the scroll, the way a film counts */
.reel{position:fixed;right:9px;bottom:calc(var(--gut) + 4px);z-index:30;display:none;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.04em;color:var(--ink);pointer-events:none;transition:color .3s linear;writing-mode:vertical-rl;transform:rotate(180deg)}
.reel[data-tone=bone]{color:var(--bone)}

/* the film, when it can run */
.nv-live .push{position:relative;height:calc(var(--vh)*400);background:#0C1D82}
.nv-live .push__stage{position:sticky;top:0;height:calc(var(--vh)*100);overflow:hidden}
.nv-live .hero,.nv-live .crease{position:absolute;inset:0;height:auto}
.nv-live .crease{opacity:0;z-index:2;will-change:opacity}
.nv-live .crease__h{top:50%;transform:translateY(-50%);font-size:min(8.6vw,calc(var(--vh)*14.4))}
.nv-live .crease__end{inset:0;bottom:0;justify-content:center;gap:.5em;padding:0 var(--gut);opacity:0}
.nv-live .crease__place{font-size:min(10.6vw,calc(var(--vh)*17))}
.nv-live .hero__cv{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:3}
.nv-live .day{margin-top:calc(var(--vh)*-100);height:calc(var(--vh)*540)}
.nv-live .day__stage{display:block;position:sticky;top:0;height:calc(var(--vh)*100);overflow:hidden}
.nv-live .frame{position:absolute;inset:0;height:auto;opacity:0;will-change:opacity}
.nv-live .frame:first-child{opacity:1}
.nv-live .frame .nv-plate{width:100%;left:0}
.nv-live .frame__h{left:calc(var(--gut) - .2vw);right:var(--gut);top:calc(var(--nav-h) + var(--vh)*2);font-size:clamp(70px,9.3vw,170px);line-height:1;will-change:opacity,transform}
.nv-live .hears{position:absolute;left:0;right:0;top:calc(var(--nav-h) - 4px);padding:calc(var(--vh)*5) var(--gut);background:none;opacity:1;pointer-events:none}
.nv-live .hears__s{opacity:0}
.nv-live .hears__in input{pointer-events:auto}
.nv-live .said{margin-top:calc(var(--vh)*-100);position:sticky;top:0}
.nv-live .reel{display:flex}

/* the walls pin, and each one comes up over the last */
@media (min-width:821px) and (min-height:640px){.nv-live .wall{position:sticky;top:0}}

/* the pinned parts need a wide window: at least 1100px, or the list and the N would meet */
@media (min-width:1100px) and (min-height:620px){
  .nv-live .parts{height:calc(var(--vh)*400)}
  .nv-live .parts__stage{position:sticky;top:0;height:calc(var(--vh)*100);padding:0}
  .nv-live .parts__cv{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0}
  .nv-live .parts__h{position:absolute;left:calc(var(--gut) - .1vw);top:calc(var(--nav-h) - 14px);margin:0;width:auto;font-size:min(8.2vw,calc(var(--vh)*14.6))}
  .nv-live .parts__all{position:absolute;left:0;top:calc(var(--parts-end,560px) - var(--nav-h) + 14px);white-space:nowrap;margin:0;font-size:min(4.4vw,calc(var(--vh)*7.6));opacity:0;will-change:opacity,transform}
  .nv-live .parts__list{position:absolute;left:var(--gut);top:calc(var(--nav-h) + min(8.2vw,calc(var(--vh)*14.6)) * 1.04 - 2px);margin:0;width:38vw}
  .nv-live .part{display:flex;align-items:baseline;gap:.5em;width:max-content;max-width:100%;padding:0;border:0;font-size:min(3.64vw,calc(var(--vh)*6));line-height:1.2;opacity:.34;transition:opacity .34s linear}
  .nv-live .part.is-on,.nv-live .part.is-done{opacity:1}
  .nv-live .part__n{width:.72em;flex:none}
  .nv-live .part__t{line-height:1.2}
  .nv-live .part__d{position:absolute;left:0;top:100%;width:min(34vw,560px);margin-top:calc(var(--vh)*1.8);font-size:var(--t-lede);line-height:1.36;letter-spacing:-.006em;opacity:0;transform:translateY(8px);transition:opacity .22s linear,transform .4s var(--ease)}
  .nv-live .part.is-on .part__d{opacity:1;transform:none}
  .nv-live .parts__lead{display:block;position:absolute;left:0;top:0;z-index:2;width:100px;height:1px;background:var(--ink);transform-origin:0 50%;opacity:0;transition:opacity .2s linear;will-change:transform}
  .nv-live .parts__lead::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;background:var(--ink);border-radius:50%}
  .nv-live .parts__more{position:absolute;left:var(--gut);top:calc(var(--parts-end,560px) + min(4.4vw,calc(var(--vh)*7.6)) * 1.08 + 26px);width:min(34vw,560px);margin:0;font-size:var(--t-lede);line-height:1.36;opacity:0;pointer-events:none;transition:opacity .3s linear}
  .nv-live .parts__more.is-on{opacity:1;pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){.hero__h1 .w>span{animation:none}.hero__glint{display:none}}
.nv-flat .hero__glint{display:none}
.nv-flat .hero__h1 .w>span{animation:none}

/* smaller laptops: the price moves into the left block, the button stands alone */
@media (min-width:821px) and (max-width:1180px){
  .hero__pay-s{display:block;margin-top:6px;font-size:16px;font-weight:500}
  .hero__price{display:none}
  .wall--b .wall__note{position:static;grid-column:1/-1;flex-direction:row;align-items:flex-end;max-width:none}
}

/* phones and small tablets */
@media (max-width:820px){
  .hero{--shift:0px;--plate-y:calc(var(--shift)*-1);--ox:50%;--oy:44%}
  .hero__h1{left:calc(var(--gut) - 3px);top:calc(var(--nav-h) - 2px);font-size:31.4vw;line-height:.9;letter-spacing:-.026em;white-space:normal;width:calc(100% + 40px)}
  .hero__h1 .w{padding-bottom:.22em;margin-bottom:-.22em}
  .hero__br{display:block;height:0}
  .hero__foot{left:var(--gut);right:var(--gut);width:auto;bottom:calc(var(--dock-h) + 14px)}
  .hero__say{font-size:clamp(29px,8.3vw,40px);line-height:1.04;max-width:none}
  .hero__for{margin-top:8px;font-size:15.5px;line-height:1.9}
  .hero__pay-s{display:block;margin-top:6px;font-size:16px;font-weight:600;letter-spacing:-.005em}
  .hero__pay{display:none}
  .hero__scale{font-size:18px}

  .crease{--edge:9.7vw;--in:9px}
  .crease__h,.crease__place{font-size:12.4vw;line-height:1.05;padding:0}
  .crease__h{padding:0 calc(var(--edge)*1.25)}
  .nv-live .crease__h{font-size:17.4vw}
  .nv-live .crease__place{font-size:18vw}
  .crease__sub{font-size:27px}
  .edge__run--b,.edge__run--l{top:calc(100% - var(--in) - var(--dock-h))}

  .day__stage{grid-template-columns:1fr}
  .frame{height:calc(var(--vh)*88)}
  .frame .nv-plate{width:100%;left:0}
  .frame__h{top:calc(var(--nav-h) + 4px);right:var(--gut);font-size:min(21vw,120px);line-height:1.02}
  .frame__t{bottom:calc(var(--dock-h) + 14px);font-size:12px}
  .hears{font-size:13vw;line-height:1.1;padding:calc(var(--nav-h) + 6px) var(--gut) calc(var(--dock-h) + 22px)}

  .said{--s:23.4vw;justify-content:flex-start;padding:calc(var(--nav-h) + 8px) var(--gut) calc(var(--dock-h) + 14px)}
  .said__h{flex:1;display:flex;flex-direction:column;justify-content:space-between;line-height:1.02}
  .said__we{text-align:left;font-size:.822em;line-height:1.03;margin:0}
  .said__not{position:static;width:auto;padding-top:14px;font-size:15.5px;line-height:1.9}

  .wall{height:auto;min-height:0;background:linear-gradient(var(--wall) 30%,var(--wall-floor))}
  .wall__line{font-size:17.6vw}
  .wall__note{align-items:flex-end;gap:14px}
  .wall__go{gap:0}
  .wall__go .nv-go{font-size:15px;gap:9px;padding:9px 0}
  .wall .nv-placard{flex:none;max-width:206px}
  .wall__man{--man:46px}
  .wall--a,.wall--b,.wall--c,.wall--d{display:block;padding:calc(var(--nav-h) + 8px) var(--gut) calc(var(--dock-h) + 22px)}
  .wall--a .proof__say{margin-bottom:10px}
  .wall--a .wall__line{margin-top:0;font-size:18vw;line-height:1.02}
  .wall--a .nv-view{margin:14px calc(var(--gut)*-1) 16px var(--gut);aspect-ratio:4/5;box-shadow:-10px 8px 0 rgba(21,16,10,.2)}
  .wall--a .wall__man{display:none}
  .wall--b .wall__line{display:block}
  .wall--b .wall__l1,.wall--b .wall__l2{font-size:17.2vw;line-height:1.03}
  .wall--b .wall__l2{margin-top:calc(100vw*.95 + 24px);text-align:right}
  .wall--b .nv-view{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 8px + 17.2vw*1.03*2 + 16px);margin:0;aspect-ratio:1/.95;box-shadow:none}
  .wall--b .wall__note{flex-direction:row;align-items:flex-end;margin-top:14px}
  .wall--b .wall__man{display:none}
  .wall--c{text-align:center}
  .wall--c .wall__line{display:block}
  .wall--c .wall__big{font-size:19.6vw;white-space:normal}
  .wall--c .wall__mid{margin:.1em 0 .14em;font-size:27px}
  .wall--c .nv-view{width:72%;aspect-ratio:9/13.4;margin:14px auto 18px}
  .wall--c .wall__note{flex-direction:row;align-items:flex-end;justify-content:center;text-align:left;margin:0}
  .wall--c .wall__man{display:none}
  .wall--d .view--wide{display:none}
  .wall--d .view--phone{position:relative;left:auto;bottom:auto;width:60%;aspect-ratio:9/15.4;margin:0 auto 16px;outline-width:4px}
  .wall--d .wall__part{font-size:24vw}
  .wall--d .wall__q{font-size:27px}
  .wall--d .wall__note{margin-top:16px}
  .wall--e{display:block;padding-top:calc(var(--nav-h) + 8px)}
  .wall--e .nv-view{height:auto;aspect-ratio:1/1.08}
  .wall__floor{display:block;padding:16px var(--gut) calc(var(--dock-h) + 22px)}
  .wall--e .wall__line{font-size:15.2vw;line-height:1.05;margin-bottom:14px}
  .wall--e .wall__man{display:none}

  .parts__stage{display:flex;flex-direction:column;min-height:0;padding:calc(var(--nav-h) + 12px) var(--gut) 0}
  .parts__h,.parts__list,.parts__more{width:auto}
  .parts__h{font-size:17vw;line-height:1.04}
  .parts__all{font-size:.74em}
  .parts__list{margin-top:14px}
  .part{grid-template-columns:minmax(0,1fr) 78px;column-gap:10px;align-items:center;padding:7px 0 8px;font-size:27px}
  .part__n{display:none}
  .part__frag{display:block;grid-column:2;grid-row:1;width:78px;height:78px;object-fit:contain}
  .part__b{grid-column:1;grid-row:1;min-width:0}
  .part__t{line-height:1.08}
  .part__d{font-size:15.5px;line-height:1.38;margin-top:3px}
  .parts__more{margin-top:16px;font-size:16px}
  .parts__still{position:relative;inset:auto;height:auto;margin:6px calc(var(--gut)*-1) 0;width:auto;aspect-ratio:1000/860}
  .parts__still img{object-position:50% 100%}

  .not{padding:calc(var(--nav-h) + 26px) var(--gut) calc(var(--dock-h) + 30px)}
  .not__h{font-size:15vw;line-height:1.04;margin-bottom:14px}
  .not__i{display:block;padding:6px 0 12px;font-size:13vw}
  .not__d{font-size:16.5px;margin-top:2px}

  .price{height:auto;min-height:0;aspect-ratio:1/1.14;background:var(--floor)}
  .price .nv-plate{height:auto;aspect-ratio:1/1;top:auto;bottom:0}
  .price__line{bottom:14px;font-size:7.05vw}
  .print{padding:20px var(--gut) calc(var(--dock-h) + 22px)}
  .print__list{grid-template-columns:1fr}
  .print__i{font-size:14.8vw;padding:.12em 0 .3em}
  .print__i dd{font-size:16.5px}

  .how{padding-top:24px}
  .how__h{font-size:21vw}
  .how__steps{display:block;margin-top:14px}
  .step{height:auto;min-height:72px;flex-direction:row;align-items:baseline;gap:12px;margin-left:calc(var(--i)*7.4vw);padding:12px var(--gut) 14px 14px}
  .step:first-child{padding-left:var(--gut)}
  .step__n{font-size:34px;flex:none}
  .step__t{font-size:17px;max-width:none}

  .ask{padding:24px var(--gut) calc(var(--dock-h) + 20px)}
  .ask__top{display:block;margin-bottom:12px}
  .ask__h{font-size:19vw}
  .ask__note{text-align:left;margin-top:4px}

  .fin{padding:28px var(--gut) 34px}
  .fin__l{font-size:14.4vw;line-height:1.08}
  .fin__l span{white-space:normal}

  .reel{display:none!important}

  .nv-live .push{height:calc(var(--vh)*230)}
  .nv-live .day{height:calc(var(--vh)*280)}
  .nv-live .frame__h{top:calc(var(--nav-h) + 4px);font-size:min(21vw,120px);line-height:1.02}
  .nv-live .hears{top:var(--nav-h);padding:12px var(--gut)}
}
/* a short phone: the offer gets the room, the headline runs on one line */
@media (max-width:820px) and (max-height:759px){
  .hero{--shift:132px}
  .hero__h1{font-size:19.7vw;white-space:nowrap;top:calc(var(--nav-h) - 2px)}
  .hero__br{display:none}
  .hero__say{font-size:clamp(26px,7.6vw,34px)}
  .hero__for{font-size:15px;line-height:1.72;margin-top:4px}
  .hero__pay-s{margin-top:2px;font-size:15px}
  .hero__foot{bottom:calc(var(--dock-h) + 8px)}
  .hero__scale{display:none}
}
/* a tablet held upright */
@media (min-width:600px) and (max-width:820px){
  .wall__line{font-size:13vw}
  .wall--a .wall__line{font-size:13vw}
  .wall--a .nv-view{aspect-ratio:4/3.2}
  .wall--b .wall__l1,.wall--b .wall__l2{font-size:12vw}
  .wall--b .wall__l2{margin-top:calc(100vw*.66 + 24px)}
  .wall--b .nv-view{top:calc(var(--nav-h) + 8px + 12vw*1.03 + 14px);aspect-ratio:1/.66}
  .wall--c .wall__big{font-size:14vw}
  .wall--c .nv-view{width:56%}
  .wall--d .view--phone{width:44%}
  .wall--e .wall__line{font-size:10vw}
  .wall--e .nv-view{aspect-ratio:1/.72}
  .not__i{font-size:11vw}
  .said{--s:15.6vw}
  .hears{font-size:9.4vw}
  .print__i{font-size:10.4vw}
  .fin__l{font-size:10vw}
  .hero{--shift:calc(65vw - 200px)}
  .hero__h1{font-size:19.9vw;white-space:nowrap}
  .hero__br{display:none}
}
/* a laptop with little height */
@media (min-width:821px) and (max-height:700px){
  .hero__say{font-size:30px}
  .nv-live .frame__h{font-size:clamp(60px,7.6vw,120px)}
  .nv-live .part__t{font-size:clamp(40px,4.6vw,70px)}
}

/* the headline stands in front of the N, so every letter can be read */
.hero__h1{z-index:2}
#set2{z-index:1}

/* on tablets the hero keeps to the headline, the line and the N: the price button lives in the nav */
@media (min-width:821px) and (max-width:1279px){.hero__pay{display:none}.hero__foot{max-width:400px;z-index:3}}
/* the price sits with the line on the left, so the floor to the right of the man stays clear for his caption */
@media (min-width:1280px){.hero__price{display:none}.hero__pay-s{display:block;margin-top:8px;font-size:17px;font-weight:600;letter-spacing:-.005em}.hero__scale::after{display:none}}