.open{--ink:#111014;--ink-2:#716D75;--ink-3:#A39FA6;--violet:#5631B8;--ease:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--arrive:cubic-bezier(.16,1,.3,1);background:#F8F7F4;color:var(--ink);font-family:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5}.open .d1{font-weight:500;font-size:clamp(38px,6vw,92px);letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}.open .brand{font-weight:500;font-size:15px;letter-spacing:-.01em}.open .violet{color:var(--violet)}
/* ============================================================
   1 · CHAOS — the business closing in
   ============================================================ */
.open{position:relative;height:100svh;min-height:640px;overflow:hidden}
.open .brand{position:absolute;top:36px;left:max(32px,calc((100% - 1200px)/2));z-index:3;opacity:0;animation:fade .9s var(--ease) .2s forwards}
@keyframes fade{to{opacity:1}}
.open .center{position:absolute;inset:0;z-index:2}
.open .say{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,90vw);text-align:center;opacity:0;
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.open .say.on{opacity:1}
.open .say.off{opacity:0;transform:translate(-50%,-51%)}
.open .say .mind{margin:40px auto 0;font-size:clamp(21px,1.9vw,28px);line-height:1.4;color:var(--ink-2);opacity:0;transition:opacity 1s var(--ease);max-width:32ch}
.open .say .mind.on{opacity:1}
.open .cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:clamp(22px,2.1vw,34px);font-weight:500;letter-spacing:-.025em;color:var(--ink);opacity:0;transition:opacity 1s var(--ease);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.open .cue .violet{font-weight:500}
.open .cue.on{opacity:1}
.open .cue i{display:block;width:1px;height:36px;background:var(--ink-3);animation:drop 1.8s var(--ease-in-out) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}
/* the words: one face, one ink, subtle scale and weight variation — chaos from motion and accumulation only */
.w{position:absolute;left:var(--x);top:var(--y);transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));
  font-weight:var(--fw,400);font-size:var(--s,28px);letter-spacing:-.025em;line-height:1;color:var(--ink);white-space:nowrap;opacity:0;
  transition:transform var(--t,1.2s) var(--arrive),opacity calc(var(--t,1.2s)*.6) var(--ease)}
.w.on{opacity:1;transform:translate(-50%,-50%)}
.open.tight .w.on{transform:translate(calc(-50% + var(--ix)),calc(-50% + var(--iy))) scale(.86);transition:transform 1.4s var(--ease),opacity .9s var(--ease),color .9s var(--ease);color:var(--ink-2)}
.open.gone .w{opacity:0;transform:translate(calc(-50% + var(--ix)),calc(-50% + var(--iy) - 30px)) scale(.8);transition:opacity .9s var(--ease-in-out),transform 1.1s var(--ease-in-out)}


@media(max-width:700px){
 .open .brand{left:20px;top:28px}.open .cue{font-size:22px;bottom:22px}
 /* Match the desktop hierarchy: the operation sits directly below the central truth, before the people it coordinates. */
 .open .w-operation{left:50%!important;top:61%!important;--x:50%!important;--y:61%!important;--ix:0px!important;--iy:0px!important;--s:24px!important}
 .open .w-office{--y:75%!important;--ix:25px!important;--iy:0px!important}
 .open .w-customers{--y:78%!important;--ix:-30px!important;--iy:0px!important}
}
@media(prefers-reduced-motion:reduce){.open .say.on,.open .cue.on{opacity:1!important}.open .w{display:none}}
@media(max-width:900px){.open .w{font-size:calc(var(--s,28px)*.7)}}