/* THE WORLD 2 (3 Nov 2026): the Site 95 home header as real Cycles frames (assets/95/world2/world2.js). Scoped to .w2, so THE WORLD
   v1 (?header=world1, .tw) and THE TURN (?header=turn, .tn95 .tn2) keep their own looks.
   Jacob 2 Nov 6:42 PM: "way cleaner". On the header: one headline, the material counter with NEXT, the panel of close ups,
   Book a call, one logo. Nothing else. Spacing on an 8 point grid; nothing sits on the emblem (it stands at about 60 percent across
   on wide screens, centred in the lower part on tall ones).
   First paint: the poster, the orbit's front frame in flower, placed exactly where the canvas draws it. */
/* the side inset on the 8 point grid (3 Nov QA 12): 80 at 1920, 56 at 1440 */
.w2{--w2-x:max(24px,4.2vw)}
@supports (width:round(down,10px,8px)){.w2{--w2-x:max(24px,round(down,4.2vw,8px))}}
.w2{height:calc(var(--wh,100svh) * 2.6);overflow:clip;background:#D9DADB;color:#1A1C20}
.w2 .fr-host{position:sticky;top:0;height:var(--wh,100svh);max-height:none;min-height:0;overflow:hidden;
  background:#D9DADB url(/assets/95/world2/poster-d.webp) 50% 55%/cover no-repeat;
  background-image:image-set(url(/assets/95/world2/poster-d.avif) type("image/avif"),url(/assets/95/world2/poster-d.webp) type("image/webp"))}   /* perf95: AVIF first, 134 to 74 KB */
@media (max-aspect-ratio:105/100){
  .w2 .fr-host{background:url(/assets/95/world2/poster-m.webp) 72.4% 100%/126.6% auto no-repeat,linear-gradient(#D6D8DA,#E4E2E1);
    background-image:image-set(url(/assets/95/world2/poster-m.avif) type("image/avif"),url(/assets/95/world2/poster-m.webp) type("image/webp")),linear-gradient(#D6D8DA,#E4E2E1)}}   /* perf95: AVIF first, 71 to 52 KB */
.w2 .w2-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.w2 .w2-on .w2-canvas{opacity:1}
.w2 .fr-host{cursor:grab}
.w2.w2-dragging .fr-host{cursor:grabbing}
html.tw-cur-on .w2 .fr-host{cursor:none}

/* the bar: the one logo left (the logo artwork, larger than the type beside it), Book a call right. Nothing else. */
.w2 .fr95-hud{top:max(24px,calc(16px + env(safe-area-inset-top)));left:var(--w2-x);right:var(--w2-x);color:#1A1C20;--fr95-act:#2F6F95;--fr95-act-ink:#F2F0EF}
.w2 .fr95-hud .light,.w2 .fr95-hud .work,.w2 .fr95-hud .menu{display:none}
/* perf95 (5 Nov 2026): the first screen says what MUUS is and shows proof before any scroll: the line and the receipts under the headline */
.w2 .fr95-head .fr95-line{color:inherit;opacity:.82;max-width:44ch}
.w2 .fr95-head .fr95-proof{margin-top:6px;opacity:.62}
@media (max-width:760px){.w2 .fr95-head .fr95-line{margin-left:auto;margin-right:auto;font-size:12px;letter-spacing:.14em}}
.w2 .fr95-hud .brand{display:flex;align-items:center;min-height:48px;color:#1A1C20}
.w2 .fr95-hud .brand .wm-svg{display:block;height:24px;width:auto}
.w2 .fr95-hud .brand{transition:color .4s}
.w2.w2-deep .fr95-hud .brand{color:#F2F0EF}
.w2 .fr95-btn.book{min-height:48px;padding:0 24px;font:600 15px/1 Switzer,sans-serif}

/* the one headline: top left on wide screens, in the open sky; centred on tall ones, above the world */
.w2 .fr95-head{position:absolute;z-index:2;left:var(--w2-x);right:auto;top:clamp(128px,20vh,216px);width:min(40vw,760px);text-align:left;
  opacity:calc(1 - var(--w2-push,0) * 1.6);transform:translateY(calc(var(--w2-push,0) * -40px))}
/* QA 4 item 8: past push frame 4 the headline is gone, never ghost type over the macro; it fades back in over 200 ms below frame 4 */
.w2 .w2-in .fr95-head{opacity:0;transition:opacity .2s}
.w2 .fr-host:not(.w2-in) .fr95-head{transition:opacity .2s}
.w2 .fr95-head::before{content:none}
.w2 .fr95-h1{margin:0;font-size:clamp(40px,4vw,80px);line-height:.96;letter-spacing:-.012em;text-wrap:balance;color:#1A1C20}
@media (max-aspect-ratio:105/100){
  .w2 .fr95-head{left:24px;right:24px;width:auto;text-align:center;top:calc(104px + env(safe-area-inset-top))}
  .w2 .fr95-h1{font-size:min(10.4vw,48px)}}

/* the counter and NEXT: bottom left, over the near blooms; NEXT is a hairline pill, never the Ice fill */
.w2 .w2-bar{position:absolute;z-index:3;left:var(--w2-x);bottom:max(32px,calc(16px + env(safe-area-inset-bottom)));display:flex;align-items:center;gap:8px}
.w2 .w2-label{display:inline-flex;align-items:center;gap:16px;height:40px;margin:0;padding:0 16px;border-radius:999px;color:#F2F0EF;
  background:rgb(27 26 25 / .62);font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.w2 .w2-count{opacity:.85;font-variant-numeric:tabular-nums}   /* QA 4 item 5: .85, AA over bright sky in the zoom */
.w2 .w2-next{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;margin:0;border-radius:999px;border:1px solid rgb(242 240 239 / .5);
  background:rgb(27 26 25 / .62);color:#F2F0EF;font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s}
.w2 .w2-next:hover{border-color:rgb(242 240 239 / .95)}
.w2 .w2-nx{opacity:.85}
.w2 .w2-next:focus-visible,.w2 .w2-sw:focus-visible{outline:1px solid #A2CFE7;outline-offset:4px}

/* the panel: the close ups, rendered macros of each material, a row bottom right over the near blooms, opposite the counter, so
   nothing sits on the emblem wherever the orbit carries it */
.w2 .w2-panel{position:absolute;z-index:3;right:var(--w2-x);bottom:max(32px,calc(16px + env(safe-area-inset-bottom)));display:flex;flex-direction:row;align-items:flex-end;gap:16px}
.w2 .w2-sw{position:relative;display:block;width:56px;height:56px;padding:0;margin:0;border:0;border-radius:16px;overflow:visible;cursor:pointer;background:#B9B4B2;
  box-shadow:0 8px 24px rgb(30 22 24 / .18);transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.w2 .w2-sw img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.w2 .w2-sw::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5);transition:box-shadow .3s}
.w2 .w2-sw:hover::after{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .95)}
.w2 .w2-sw.on{width:80px;height:80px;border-radius:24px}
.w2 .w2-sw.on::after{box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .95)}
.w2 .w2-sw-name{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:500 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#F2F0EF;background:rgb(27 26 25 / .62);
  opacity:0;transition:opacity .25s}
.w2 .w2-sw:hover .w2-sw-name,.w2 .w2-sw:focus-visible .w2-sw-name{opacity:1}
@media (max-aspect-ratio:105/100){
  /* phones: the close ups become a row of round ones under the headline, in the open sky; the counter alone at the bottom */
  .w2 .w2-panel{top:max(calc(var(--w2-headb,272px) + 24px),calc((var(--w2-headb,272px) + var(--w2-embt,520px)) / 2 - 32px));bottom:auto;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;align-items:center;gap:16px}
  .w2 .w2-sw{width:48px;height:48px;border-radius:50%}
  .w2 .w2-sw.on{width:64px;height:64px;border-radius:50%}
  .w2 .w2-sw-name{display:none}
  .w2 .w2-bar{left:50%;transform:translateX(-50%);bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));max-width:calc(100vw - 48px)}
  /* QA 4 item 3: on phones NEXT reads NEXT only, and the two pills stay side by side inside a 24 px gutter at 360 to 430 */
  .w2 .w2-nx{display:none}
  .w2 .w2-label{gap:12px;padding:0 14px;min-width:0;flex:0 1 auto}
  .w2 .w2-name{display:block;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .w2 .w2-next{flex:0 0 auto;padding:0 14px}}
@media (prefers-reduced-motion:reduce){.w2 .w2-canvas{transition:none}.w2 .w2-sw{transition:none}}
/* the logo link is THE WORLD 2's; v1 (.tw) and THE TURN (.tn2) keep their bars as they were */
.tw .fr95-hud .brand,.tn2 .fr95-hud .brand{display:none}