.call-control{--call-size:56px;--call-number-width:180px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--call-size);min-width:var(--call-size);padding:0 calc((var(--call-size) - 26px)/2);border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:16px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color 240ms ease,color 240ms ease,border-color 240ms ease,transform 180ms var(--ease)}
.call-control>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 450ms var(--ease),color 240ms ease}
.call-control-number{display:block;overflow:hidden;min-width:0;max-width:0;margin-left:0;opacity:0;transform:translateX(-8px);transition:max-width 500ms var(--ease),margin-left 500ms var(--ease),opacity 160ms ease,transform 350ms var(--ease)}
.call-control.is-expanded{background:var(--ink);color:var(--paper)}
.call-control.is-expanded>svg{color:var(--accent);transform:rotate(-12deg)}
.call-control.is-expanded .call-control-number{max-width:var(--call-number-width);margin-left:12px;opacity:1;transform:translateX(0);transition:max-width 500ms var(--ease),margin-left 500ms var(--ease),opacity 200ms ease 100ms,transform 400ms var(--ease) 60ms}
.call-control:active{transform:scale(.97)}
.call-control:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.call-control--light:focus-visible{outline-color:var(--accent)}
.call-control--light{border-color:var(--dark-line);color:var(--paper)}
.call-control--light.is-expanded{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hero .call-control{--call-size:62px}
.header .call-control{--call-size:48px;font-size:14px}
@media(hover:hover) and (pointer:fine){.call-control:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}.call-control.is-expanded:hover>svg{color:var(--ink)}}
@media(max-width:500px){.hero .call-control{--call-size:56px}}
@media(max-height:500px) and (orientation:landscape){.hero .call-control{--call-size:46px}}
@media(prefers-reduced-motion:reduce){.call-control,.call-control>svg,.call-control-number,.call-control.is-expanded .call-control-number{transition:none}.call-control>svg,.call-control.is-expanded>svg,.call-control-number,.call-control.is-expanded .call-control-number,.call-control:active{transform:none}}
